如何始终显示第一个 TAB答案

【问题标题】：How to always show the first TAB如何始终显示第一个 TAB
【发布时间】：2016-07-09 15:14:34
【问题描述】：

我想在页面加载时始终显示第一个选项卡，即“详细信息”选项卡，有什么想法吗？我已经尝试添加在页面加载时运行的 JavaScript，但它并没有如我所愿。

HTML：

<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Details')">Details</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Reviews')">Reviews</a></li>
</ul>

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

<div id="Reviews" class="tabcontent">
  <h3>Reviews</h3>
  <p>Paris is the capital of France.</p>
</div>

JavaScript：

function getFirstChildWithTagName(evt, tagName) {
  for (var i = 0; i < element.childNodes.length; i++) {
    if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];
  }
}

function openTab(evt, tabName) {
  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 < tabcontent.length; i++) {
    tablinks[i].classList.remove("active");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.classList.add("active");
}

$(document).ready(function () {
  $('.tablinks:first').addClass('active');
});

试过下面的代码，还是不行：

function LoadFunction() {
  var mybtn = document.getElementsByClassName("tablinks")[0];
  mybtn.click();
}
window.onload = LoadFunction();

【问题讨论】：

“但它并没有如我所愿” — 你在期待什么？什么没有发生？
我发现它运行良好——jsfiddle.net/rayon_1990/26sp9ycs
请检查这个jqueryui.com/tabs

标签： javascript html

【解决方案1】：

一种方法是在初始 HTML 中添加模仿按钮点击的样式元素。

将活动类添加到 tablink 按钮

<li><a href="javascript:void(0)" class="tablinks active" onclick="openTab(event, 'Details')">Details</a></li>

为标签内容添加显示样式

<div id="Details" class="tabcontent" style="display:block">

希望有帮助

【讨论】：

这行得通，谢谢！我只添加了 display:block ，它就像一个魅力！

【解决方案2】：

这段代码应该适合你。

$(document).ready(function(){

    $('.tab li:first-child').find('a').addClass('active');
    $('.tabcontent').hide();
    $('.tabcontent:first-child').show();
});

【讨论】：

【解决方案3】：

删除 jQuery 代码：

$(document).ready(function () {
    $('.tablinks:first').addClass('active');
});

或将 jQuery 库添加到您的代码中

【讨论】：

【解决方案4】：

您可以通过对代码进行少量修正来实现您的目标。请注意您同时使用 JQuery 和 JavaScript 语法，因此我假设您已在代码中包含 JQuery。

html

<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Details')">Details</a></li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Reviews')">Reviews</a></li>
</ul>

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

<div id="Reviews" class="tabcontent">
  <h3>Reviews</h3>
  <p>Paris is the capital of France.</p>
</div>

脚本

function getFirstChildWithTagName(evt, tagName) {
  for (var i = 0; i < element.childNodes.length; i++) {
    if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];
  }
}

function openTab(elem, tabName) {
  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 < tabcontent.length; i++) {
    tablinks[i].classList.remove("active");
  }
  document.getElementById(tabName).style.display = "block";
  console.log(elem)
  $(elem[0]).addClass("active");
}

$(document).ready(function () {
  var elem = $('.tablinks:first');
  var tabName = "Details"
  openTab(elem,tabName);
});

plunker：http://plnkr.co/edit/G8Kw76nvK4Xsz8oY6fRQ?p=preview

【讨论】：