Tabbed Content Tabs-CodePudding

I'm using this method from W3schools for tabbed content and it's working well except for one minor detail that is overlooked in their example. When the tab is closed by clicking on the X in the content, the tab remains in the active presentation, a darker color in this instance. I want the tabs to revert to their original appearance when the X is clicked (i.e. the lighter color). I contacted W3schools to point out their example is missing this feature but did not hear back. Can someone enlighten me on the code needed to achieve this?

<!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;
}

/* 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 the close button */
.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
}

.topright:hover {color: red;}
</style>
</head>
<body>

<h2>Tabs</h2>
<p>Click on the x button in the top right corner to close the current tab:</p>

<div >
  <button  onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button  onclick="openCity(event, 'Paris')">Paris</button>
  <button  onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" >
  <span onclick="this.parentElement.style.display='none'" >&times</span>
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" >
  <span onclick="this.parentElement.style.display='none'" >&times</span>
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" >
  <span onclick="this.parentElement.style.display='none'" >&times</span>
  <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>
   
</body>
</html>

CodePudding user response：

Try add this to your script:

document.querySelectorAll('.topright').forEach(item => {
    item.addEventListener('click', event => {
        let elems = document.querySelectorAll(".tablinks");

        [].forEach.call(elems, el => {
            el.classList.remove("active");
        });
    });
});

CodePudding user response：

Removing active class for tabLinks will do..

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";
}

function closeCity(evt){
  let tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i  ) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  evt.target.parentElement.style.display="none";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

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 the close button */
.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
}

.topright:hover {color: red;}

<h2>Tabs</h2>
<p>Click on the x button in the top right corner to close the current tab:</p>

<div >
  <button  onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button  onclick="openCity(event, 'Paris')">Paris</button>
  <button  onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" >
  <span onclick="closeCity(event)" >&times</span>
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" >
  <span onclick="closeCity(event)" >&times</span>
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" >
  <span onclick="closeCity(event)" >&times</span>
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>