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

然后使用jQuery处理click事件（就像你在标签中一样）：

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

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

＆＃13;

$('.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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

[将每个标签部分包含在单独的<div class="section">]

中

Answer 2

试试这个FIDDLE

var openCity = null;
window.openCity = function(evt, cityName) {......

这里我们只需要定义函数，使用小提琴

Answer 3

另请参阅jQuery UI中的库选项卡。它会有所帮助。您的所有js代码都将替换为代码

$('#tabs').tabs();

内容：

<div id='tabs'>
  <ul>
    <li><a href="#London">London</a></li>
    <li><a href="#Paris">Paris</a></li>
    <li><a href="#Tokyo">Tokyo</a></li>
  </ul>

  <div id="London" class="tabcontent">
    <h3>England</h3>
    <p>England is great to live.</p>
  </div>

  <div id="Paris" class="tabcontent">
    <h3>Madrid</h3>
    <p>Madrid is great to party</p>
  </div>

  <div id="Tokyo" class="tabcontent">
    <h3>Japan</h3>
    <p>Japan is awesome in technology.</p>
  </div>
</div>

https://jsfiddle.net/894L3577/1/

您可以在jQuery UI https://jqueryui.com/tabs

的官方网站上找到更多信息

Answer 4

将你的功能带到头标记

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

javascript多个标签无法正常工作

4 个答案: