Question

我希望第二个和第三个标签在点击时才可见。有人可以看下面的代码，并帮我弄清楚如何实现这一目标？现在，默认显示三个选项卡，直到单击其中一个选项卡，之后仅显示选定的选项卡。

非常感谢！

<div class="tab"><button class="tablinks" onclick="openCity(event, 
'General')"><span size="4" style="font-size: small;"><span color="grey" 
style="color: grey;"><b>General</b></span></span></button> <button 
class="tablinks" onclick="openCity(event, 'Product Specifications')"><span 
size="4" style="font-size: small;"><span color="grey" style="color: grey;">
<b>Product Specifications</b></span></span></button><button class="tablinks" 
onclick="openCity(event, 'Guarantee')"><span size="4" style="font-size: 
small;"><span color="grey" style="color: grey;"><b>Guarantee</b></span>
</span></button></div>
<div id="General" class="tabcontent">
CONTENT
</div>
<div id="Product Specifications" class="tabcontent">
CONTENT
</div>
<div id="Guarantee" class="tabcontent">
CONTENT
</div>

<script>// <![CDATA[
function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", 
 "");
    }

    // Show the current tab, and add an "active" class to the button that 
opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
// ]]></script>

Answer 1

我看到您使用W3Schools作为模板。为什么不直接使用原始模板并根据自己的喜好更改样式和内容？链接如下。

W3Schools

单击时如何仅显示第二个和第三个选项卡

1 个答案: