默认情况下它是空白的我希望第一个选项卡作为默认值答案

【问题标题】：by default it's blank I want first tab as default默认情况下它是空白的我希望第一个选项卡作为默认值
【发布时间】：2017-05-03 12:55:08
【问题描述】：

当页面重新加载时，您可以看到这些选项卡下的部分为空（可能使用了错误的单词）需要单击此查看内容

我想要的只是页面默认显示第一个选项卡上的加载内容

Click Here

希望你能理解我

【问题讨论】：

那么您希望默认选择第一个元素吗？
Stack Overflow 不是免费的代码编写服务。您应该尝试自己编写代码。在doing more research 之后，如果您有问题，您可以发布您尝试过的内容，并清楚地解释什么不起作用，并提供Minimal, Complete, and Verifiable example。跨度>
是的，我希望默认选择第一个元素。 :D
“希望你能理解我” – 请先阅读How to Ask。
@HardikGupta 请检查我的回答中的固定装置。

标签： javascript css tabs

【解决方案1】：

做这2件事来达到预期的效果：

1。在第一个选项卡上使用style="display:block;"，因为您的 javascript 代码的逻辑是这样工作的。因此，在页面加载时，第一个选项卡内容将始终可见，并且在选项卡更改时它将相应地工作。

将class="tablinks active" 添加到第一个选项卡链接以使其处于活动状态。

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
</style>
</head>
<body>

<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks active" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent" style="display:block;">
  <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>

<script>
function openCity(evt, cityName) {
    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(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>
     
</body>
</html>

【讨论】：

【解决方案2】：

您的所有.tabcontent 选项卡都将其display 属性设置为none。将第一个选项卡的显示属性更改为block，它将默认显示。

【讨论】：

没用 :( 在将 .tabcontent 的 display 属性从 none 更改为 block 后，默认情况下，所有内容都显示在第一个选项卡中
是的。不是所有的，只是第一个。

【解决方案3】：

你可以用jquery来做这个，然后把它放到脚本里

$('.tablinks').eq(0).click();

Working example

【讨论】：