javascript 多个选项卡无法正常工作

Question

我正在开发一个 WordPress 网站并想做这样的事情:

我知道它现在是如何工作的: https://jsfiddle.net/Wosley_Alarico/9gcrjntr/

它仅在我单击第一个选项卡的链接时有效。

有没有更好的方法可以帮助我使用 javascript 或 jquery 创建多个标签，每个标签的内容都有？

HTML:

<ul class="tab">
  <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>

<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>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>
<ul class="tab">
  <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>

<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>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

JavaScript:

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

CSS:

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

Answer 1

回答您的问题:不能有多个元素具有相同的 id attribute .它是一个标识符，因此在整个文档中必须是唯一的。

接下来是使用 onClick属性是 bad practice .
相反，使用 data attribute :

<li><a href="#" class="tablinks" data-id="London">London</a></li>
...

然后处理 click 使用 jQuery 的事件(正如您在标签中所拥有的那样):

$('.tablinks').click(function(){
    // target tab id will be: 
    $('#'+$(this).data('id'))
});

确保所有元素都具有唯一的 id属性。

$('.tablinks').each(function(){
  !$(this).is('.active') || $('#'+$(this).data('id')).show();
}).click(function(){
  $(this).closest('.section').find('.tabcontent').hide()
  .end().find('.tablinks').removeClass("active");
  $('#'+$(this).addClass("active").data('id')).show();
});

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #ccc;
}

.section{
  margin-bottom:20px;
}

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

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=section>
  <ul class="tab">
    <li><a href="#" class="tablinks active" data-id="London">London</a></li>
    <li><a href="#" class="tablinks" data-id="Paris">Paris</a></li>
    <li><a href="#" class="tablinks" data-id="Tokyo">Tokyo</a></li>
  </ul>

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

<div class=section>
  <ul class="tab">
    <li><a href="#" class="tablinks active" data-id="Warsaw">Warsaw</a></li>
    <li><a href="#" class="tablinks" data-id="Copenhagen">Copenhagen</a></li>
    <li><a href="#" class="tablinks" data-id="Moscow">Moscow</a></li>
  </ul>

  <div id="Warsaw" class="tabcontent">
    <h3>Warsaw</h3>
    <p>Warsaw is the capital city of Poland.</p>
  </div>

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

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

[将每个选项卡部分包含在单独的 <div class="section"> 中]