javascript - javascript多个标签无法正常工作

我正在开发一个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;}
}

最佳答案

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

接下来的事情是使用onClick属性是bad practice。
而是使用data attribute：

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

然后使用jQuery处理click事件（如标记中所示）：

$('.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">中]