Question

我创建了多个选项卡类以执行不同的操作，但是在完成所有更改之后，我仍然似乎面临着主动选项卡功能的问题，例如在选择其他选项卡的版本中，以前的选项卡不会隐藏，它们只会保留显示一个在另一个之下。

我一直在寻找解决方案，但是我在这里呆了几天。

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();





function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent2");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks2");
  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("defaultOpen2").click();







function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent3");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks3");
  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("defaultOpen3").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;
}

.tabcontent2 {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent3 {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <p>In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p>

  <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>
  </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>


  <br><br><br>






  <div class="tab">
    <button class="tablinks2" onclick="openCity(event, 'Russia')" id="defaultOpen2">Russia</button>
    <button class="tablinks2" onclick="openCity(event, 'Bombay')">Bombay </button>
    <button class="tablinks2" onclick="openCity(event, 'Tibet')">Tibet</button>
  </div>

  <div id="Russia" class="tabcontent2">
    <h3>Russia</h3>
    <p>Russia is the capital city of England.</p>
  </div>

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

  <div id="Tibet" class="tabcontent2">
    <h3>Tibet</h3>
    <p>Tibet is the capital of Japan.</p>
  </div>






  <br><br><br>






  <div class="tab">
    <button class="tablinks3" onclick="openCity(event, 'Rome')" id="defaultOpen3">Rome</button>
    <button class="tablinks3" onclick="openCity(event, 'Hungry')">Hungry </button>
    <button class="tablinks3" onclick="openCity(event, 'Tutupani')">Tutupani</button>
  </div>

  <div id="Rome" class="tabcontent3">
    <h3>Rome</h3>
    <p>Rome is the capital city of England.</p>
  </div>

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

  <div id="Tutupani" class="tabcontent3">
    <h3>Tutupani</h3>
    <p>Tutupani is the capital of Japan.</p>
  </div>




</body>

</html>

Answer 1

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div class="tab">
            <button class="tablinks active" data="London">London</button>
            <button class="tablinks" data="Paris">Paris</button>
            <button class="tablinks" data="Tokyo">Tokyo</button>
        </div>
        <div class="tabcontent">
            <div id="London" class="content active">
                <h3>London</h3>
                <p>London is the capital city of England.</p>
            </div>
            <div id="Paris" class="content">
                <h3>Paris</h3>
                <p>Paris is the capital of France.</p>
            </div>
            <div id="Tokyo" class="content">
                <h3>Tokyo</h3>
                <p>Tokyo is the capital of Japan.</p>
            </div>
        </div>
    </body>
</html>


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 {
    border: 1px solid #ccc;
    border-top: none;
}

.content {
    padding: 6px 12px;
    display: none
}

.content.active {
    display: block;
}



let tabs = document.querySelectorAll('.tablinks');
let tabContents = document.querySelectorAll('.content');
tabs.forEach(item => {
    item.addEventListener('click', event => {
        tabs.forEach(btn => btn.classList.remove('active'))
        event.target.classList.add('active')
        tabContents.forEach(tab => tab.classList.remove('active'))
        document.querySelector("#"+event.target.getAttribute('data')).classList.add('active')
    })
})

具有活动标签问题的多个标签部分

1 个答案: