Question

我有一个通过<button>创建的标签，这些标签的内容分别位于<div></div>中，如下所示：

function openInfo(evt, toolsName) {
    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(toolsName).style.display = "block";
    evt.currentTarget.className += " active";                
}

<button class="tablinks" onclick="openInfo(event, 'Tab1')">Tab1</button>
<button class="tablinks" onclick="openInfo(event, 'Tab2')">Tab2</button>

<div id="Tab1" class="tabcontent">
    <h5>Title</h5>
    <div class="a">
        <p>Content</p>
    </div>
</div>

，但默认情况下会隐藏所有内容。我希望默认情况下首先显示Tab1。如何修改脚本？

Answer 1

    <div id="Tab1" style="display: block;" class="tabcontent">
        <h5>Title</h5>
        <div class="a">
            <p>Content</p>
        </div>
    </div>
    <div id="Tab2" style="display: none;" class="tabcontent">
        <h5>Title2</h5>
        <div class="a">
            <p>Content2</p>
        </div>
    </div>

如果您添加更多标签，请保留其样式display: none。只有tab1的样式为display:block

Answer 2

使用引导程序选项卡，如果将其设置为class =“ active”，则第一个选项卡将始终处于活动状态，并且也易于维护。Follow the link to get idea about bootstrap tabs

除此以外，您的代码还不错，只需在执行onclick事件时显示或隐藏选项卡即可。您想简单显示或隐藏哪个选项卡。

Answer 3

function openInfo(val) {
  if ($("#" + val).hasClass("ActivTab")) {
    $("#" + val).removeClass("ActivTab").addClass("deactivTab")
  } else {
    $("#" + val).addClass("ActivTab").removeClass("deactivTab")
  }
}

.ActivTab {
  display: block
}

.deactivTab {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="tablinks" onclick="openInfo('Tab1')">Tab1</button>
<button class="tablinks" onclick="openInfo('Tab2')">Tab2</button>

<div id="Tab1" class="tabcontent ActivTab">
  <h5>Title</h5>
  <div class="a">
    <p>Content</p>
  </div>
</div>
<div id="Tab2" class="tabcontent deactivTab">
  <h5>Title2</h5>
  <div class="a">
    <p>Content</p>
  </div>
</div>

Answer 4

HTML：在第一个标签上，添加“ .open”类。

CSS：

.tabcontent {
display: none;
}

.tabcontent.open {
display: block;
}

JavaScript：将此设置为点击事件。单击后，搜索'.tabcontent.open'元素并删除.open类。之后，将'.open'类添加到单击的选项卡上。全部都在点击内的同一代码段内。

简易c：

Javascript：如何显示默认选项卡内容，但隐藏其他选项卡内容

4 个答案: