默认情况下它是空白我想第一个选项卡作为默认

-4

，你可以看到，当页面重新加载这些选项卡下的部分是空的（也许用错词）需要点击该看到的内容默认情况下它是空白我想第一个选项卡作为默认

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

希望你undersatnd我

2017-05-03 Hardik Gupta

所以，你要被默认选择的第一元素？ –

[Stack Overflow]（https://stackoverflow.com/）不是免费的代码写入服务。预计你会尝试**自己编写代码**。在[做更多研究]之后（http://meta.stackoverflow.com/questions/261592），如果你有问题，你可以**发布你已经尝试过**的清单，说明什么是不工作的**并提供[**最小，完整和可验证示例**]（http://stackoverflow.com/help/mcve）。 –

是的，我希望默认选择第一个元素。：D –

待办事项这2个东西来达到预期的效果：

1. 第一个选项卡上使用style="display:block;"因为你的JavaScript代码的逻辑是这样的。因此，在页面加载时，第1个标签内容将会显示，并且在选项卡上更改它将会相应地工作。

将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>

来源

2017-05-03 12:58:31

@empiric是的，谢谢:) –

工程，欣赏它：D –