CODEWITHSUNDEEP
javascriptonclick
Northtime
Northtime

Reputation: 35

Adding active class to tabs from onclick button event

I'm trying to understand the onclick event but getting confused?

I have a onclick button within a "tab" content. When I click this onclick button it opens the correct tab labeled "Tokyo" but it does not carry over / add the active class.

My button within the first tab content is:

<button class="new-btn" onclick="openCity(event, 'Tokyo')">Click Me</button>

I don't understand how to tell it to do the same onclick event but add the active class to the "Tokyo" tab from this new button click?

Here is the full code:

<style>
body {font-family: Arial;}

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

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  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;
}
</style>
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
  <button class="new-btn" onclick="openCity(event, 'Tokyo')">Click Me</button>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</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";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

Upvotes: 0

Views: 5482

Answers (2)

Dakine
Dakine

Reputation: 198

You are adding the active class to your button instead of the active tab. You could select the correct active tab by an id or use the tab index instead of a city name.

document.getElementById(cityName + "-tab").classList.add("active");
// evt.currentTarget.className += " active";

For example: https://jsfiddle.net/90h5nwds/

Upvotes: 1

isherwood
isherwood

Reputation: 61056

You can get the clicked button with event.target. Then you'll just add your class to it using classList.add(). You don't want to set the entire class attribute value with className because that wipes out other classes.

Upvotes: 0

Related Questions