Registerkarteninhalt standardmäßig geladen

Question

Dies könnte eine triviale Frage sein, aber ich würde gerne wissen, wie eine bestimmte Registerkarte geöffnet werden, wenn die Seite geladen wird. Im Folgenden sind nur die Registerkarten-Menüs vorhanden und der Inhalt wird geladen, nachdem auf eine der Registerkarten geklickt wurde. Kann ich stattdessen zum Beispiel das Tab-Menü und den Inhalt von "London" beim Laden der Seite laden und sehen?

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>

Answer 1

Sie können diese definieren in CSS tun, um Ihre tabcontent erste display block als wie diese

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

============ zweite Option ist, dass Sie in HTML standardmäßig Show zu einem

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>

Answer 2

Eine Lösung mit einem Klick simulieren kann deinfe können.

hinzufügen:

document.getElementsByClassName("tablinks")[0].click(); 

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"; 
 
} 
 

 
document.getElementsByClassName("tablinks")[0].click();

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

Answer 3

versuchen

.tabcontent:first-child{ 
    display:block; 
}