Question

我有3个标签，点击它们时使用javascript显示内容：

<ul class="tab">
  <li><a href="#" class="tablinks" onclick="openCity(event, '12_Weeks')">12 Weeks</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, '4_Weeks')">4 Weeks</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, '1_Week')">1 Week</a></li>
</ul>

Divs放在我的html代码中，如下所示：

<div id="12_Weeks" class="tabcontent"> <!-- Tab 1 starts here -->
<h1>Example Text</h1>
</div>

我希望在加载页面时打开第一个标签并尝试以下代码：

$( document ).ready(function() {
  // Handler for .ready() called.
  $("#12_Weeks").trigger('click');
});

然而，这似乎没有做到这一点，任何人都知道我在这里做错了什么，我相信它非常简单！？

Answer 1

您确定网页上有ID＃12_weeks的元素吗？它不在您的示例代码中。

Answer 2

您的触发点击包含标签内容，但它会显示在标题标题中。见流动代码。

$( document ).ready(function() {
  // Handler for .ready() called.
  $('ul#tab li:first > a.tablinks').trigger('click');
});

或者你可以在你的隐藏执行代码下使用它。 $（ “＃12_Weeks”）示出（ ''）;

Answer 3

似乎我需要在我的javascript函数中添加openCity（“12_Weeks”），他们似乎已经在W3schools中留下了这一点，感谢所有人的帮助！

Answer 4

您可以直接在默认style="display: block;"标记中使用<div></div>，如下所示：

<div id="12_Weeks" class="tabcontent" style="display: block;"> <!-- Tab 1 starts here -->
<h1>Example Text</h1>
</div>

点击其他标签后，style="display: none;"和当前点击标签会被style="display: block;"

这应该可以解决问题。

打开页面加载选项卡 - Javascript

4 个答案: