Question

我有JavaScript标签工作，但我想这样做，所以第一个标签显示/活动页面加载时。目前，页面加载时没有活动标签。

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

的JavaScript

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 link that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

Answer 1

如果您使用＆＃34;有效＆＃34;要隐藏的类（隐藏没有此类的任何内容），您只需将其添加到要在页面加载时打开的选项卡。

Answer 2

将类active添加到第一个标签页，并将其余内容隐藏display: none或创建inactive类：

<div id="London" class="tabcontent active">
    <h3>London</h3>
    <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent" style="display: none">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent" style="display: none">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
</div>

Answer 3

您可以使用javascript：

 window.addEventListener('DOMContentLoaded', function(e) {
   document.getElementsByClassName('tablinks')[0].click();
 }, false);

或jQuery：

$(function () {
    $('.tablinks:eq(0)').click();
});

当文档准备就绪或加载文档内容时，您可以触发第一个选项卡的单击。

另一种方法是将活动类直接添加到HTML中。

要在javascript中为元素添加/删除类，您可以使用：

classList.remove或classList.add

而是使用className。

我的片段：

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].classList.remove("active");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.target.classList.add("active");
}

// javascript solution
window.addEventListener('DOMContentLoaded', function(e) {
  // document.getElementsByClassName('tablinks')[0].click();
}, false);

// jQuery solution
$(function () {
  $('.tablinks:eq(0)').click();
});

.active {
  color: green;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<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>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
</div>

JavaScript标签问题

3 个答案: