0

I'm back with more questions. I recently wrote up some HTML (to create a set of three tabs) and put it on the page with the HTML Form Web Part. But now, whenever I click on one of the tabs in order to view the content, the entire page refreshes. How can I stop that from happening?

For reference, here's the code, although I can't see how that could be causing the issue:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  text-align: center
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: center;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Gofrom zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
} 
</style>
</head>
<body>

<p>Further information for Admin Users can be found <a href=" ">here.</a> 

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">New User's 
Guide</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">How To's</button>
  <button class="tablinks" onclick="openCity(event, 'Madrid')">What to Know</button>

<!--This is New User's Guide-->
<div id="London" class="tabcontent">
  <h3>Links to Training Videos</h3>

  <ol>

  </ol>
  <ul>

  </ul>
</div>


<!-- This is How To's-->
<div id="Paris" class="tabcontent">

  <style>
* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>For Cases</h2>
    <ul>

    </ul>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>For Technical Inventory</h2>
    <ul>

    </ul>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>For Accountable Inventory</h2>
    <ul>

  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>For JI Requirements</h2>
    <ul>

    </ul>
  </div>
</div>

</body>
</html> 
</div>


<!-- This is What to Know-->
<div id="Madrid" class="tabcontent">
  <style>
* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>

<body>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Cases</h2>
   <ul>

</ul>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Inventory</h2>
     <ul>

     </ul>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>JI Requirements</h2>

  </div>
</div>



<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

</body>
3

It's because a button's default behavior is to submit a form, and if you are working in a CEWP on a web part page, that ends up being inside a form element on the page, so your button clicks attempt to submit the form, which causes a postback to the server.

You can fix it by adding an attribute type="button" to your buttons, i.e.:

<button class="tablinks" type="button" onclick="openCity(event, 'London')">New User's 
Guide</button>

Read more about the possible values for the type attribute and what they do here.

| improve this answer | |
  • And again, you've solved my problem. This is the correct answer. – jEB Jan 24 at 18:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.