Question

我想在页面加载时始终显示第一个标签，这是“详细信息”标签，任何想法都可以吗？我已经尝试添加在页面加载上运行的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();

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

希望有所帮助

Answer 2

此代码应该适合您。

$(document).ready(function(){

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

Answer 3

删除jQuery代码：

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

或将jQuery库添加到您的代码

Answer 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

如何始终显示第一个TAB

4 个答案: