默认情况下加载标签内容 [英] Tab content loaded by default

问题描述

这可能是一个小问题，但我想知道如何在网页加载时打开特定的标签页。在下面，只有选项卡菜单，并且在单击任一选项卡之后加载内容。除了这个，我可以有，例如，选项卡菜单和伦敦的内容加载和可见的页面加载吗？

  function openCity（evt，cityName）{//声明所有变量var i，tabcontent，tablinks; // Get all elements with class =tabcontentand hide them tabcontent = document.getElementsByClassName（tabcontent）; for（i = 0; i  

  / *样式列表* / ul.tab {list-style-type：none; margin：0; padding：0; overflow：hidden; border：1px solid #ccc;背景颜色：＃f1f1f1;} / *并列浮动列表项* / ul.tab li {float：left;} / *为列表项内的链接设置样式* / ul.tab li a {display：inline-块;颜色：黑色; text-align：center; padding：14px 16px; text-decoration：none;过渡：0.3s; font-size：17px;} / *更改悬停时链接的背景颜色* / ul.tab li a：hover {background-color：#ddd;} / *创建活动/当前tablink类* / ul.tab li a ：focus，.active {background-color：#ccc;} / *样式标签内容* /。tabcontent {display：none; padding：6px 12px; border：1px solid #ccc; border-top：none;}  

 < ul class = tab> < li>< a href =＃class =tablinksonclick =openCity（event，'London'）> London< / a>< / li> < li>< a href =＃class =tablinksonclick =openCity（event，'Paris'）>巴黎< / a>< / li> < li>< li>< a href =＃class =tablinksonclick =openCity（event，'Tokyo'）> Tokyo< / a>< / li>< / ul>< div id =Londonclass =tabcontent> < h3>伦敦< / h3> < p>< / div>< div id =Parisclass =tabcontent> < h3>巴黎< / h3> < / p>< / div>< div id =Tokyoclass =tabcontent> < h3>东京< / h3> < p>< / div>  
 

解决方案

您可以在css中定义 tabcontent / code>就像这样

  .tabcontent：nth-​​of-type（1）{display：block;} 
  

  function openCity（evt，cityName）{//声明所有变量var i，tabcontent，tablinks; // Get all elements with class =tabcontentand hide them tabcontent = document.getElementsByClassName（tabcontent）; for（i = 0; i  

  / *样式列表* / ul.tab {list-style-type：none; margin：0; padding：0; overflow：hidden; border：1px solid #ccc;背景颜色：＃f1f1f1;} / *并列浮动列表项* / ul.tab li {float：left;} / *为列表项内的链接设置样式* / ul.tab li a {display：inline-块;颜色：黑色; text-align：center; padding：14px 16px; text-decoration：none;过渡：0.3s; font-size：17px;} / *更改悬停时链接的背景颜色* / ul.tab li a：hover {background-color：#ddd;} / *创建活动/当前tablink类* / ul.tab li a ：focus，.active {background-color：#ccc;} / *样式标签内容* /。tabcontent {display：none; padding：6px 12px; border：1px solid #ccc; border-top：none;}。tabcontent：nth-​​of-type（1）{display：block;}  

 < ul class =tab> < li>< a href =＃class =tablinksonclick =openCity（event，'London'）> London< / a>< / li> < li>< a href =＃class =tablinksonclick =openCity（event，'Paris'）>巴黎< / a>< / li> < li>< li>< a href =＃class =tablinksonclick =openCity（event，'Tokyo'）> Tokyo< / a>< / li>< / ul>< div id =Londonclass =tabcontent> < h3>伦敦< / h3> < p>< / div>< div id =Parisclass =tabcontent> < h3>巴黎< / h3> < / p>< / div>< div id =Tokyoclass =tabcontent> < h3>东京< / h3> < p>< / div>  
 

============第二个选项是你可以在html中deinfe默认显示为一个

 function openCity（evt，cityName）{//声明所有变量var i，tabcontent，tablinks; // Get all elements with class =tabcontentand hide them tabcontent = document.getElementsByClassName（tabcontent）; for（i = 0; i  

  / *样式列表* / ul.tab {list-style-type：none; margin：0; padding：0; overflow：hidden; border：1px solid #ccc;背景颜色：＃f1f1f1;} / *并列浮动列表项* / ul.tab li {float：left;} / *为列表项内的链接设置样式* / ul.tab li a {display：inline-块;颜色：黑色; text-align：center; padding：14px 16px; text-decoration：none;过渡：0.3s; font-size：17px;} / *更改悬停时链接的背景颜色* / ul.tab li a：hover {background-color：#ddd;} / *创建活动/当前tablink类* / ul.tab li a ：focus，.active {background-color：#ccc;} / *样式标签内容* /。tabcontent {display：none; padding：6px 12px; border：1px solid #ccc; border-top：none;}  

 < ul class = tab> < li>  
 

This might be a trivial question but I would like to know how to have a particular tab opened as the page loads itself. In the following, only the tab menus are there and the contents are loaded after clicking on either one of the tabs. Instead of that, can I have, for example, the tab menu and the contents of "London" loaded and visible as the page loads?

function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

 /* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}

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

 <ul class="tab">
  <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>

<div id="London" class="tabcontent">
  <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>

解决方案

Your can do this in css define your tabcontent first display block as like this

.tabcontent:nth-of-type(1){display:block;}

function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

 /* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.tabcontent:nth-of-type(1){display:block;}

 <ul class="tab">
  <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>

<div id="London" class="tabcontent">
  <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>

============ 2nd option is you can deinfe in html by default show to one

function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

 /* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}

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

 <ul class="tab">
  <li><a href="#" class="tablinks active" onclick="openCity(event, 'London')">London</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>

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

这篇关于默认情况下加载标签内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！