wie Sie sehen können, wenn die Seite der Abschnitt unter diesen Registerkarten nachlädt leer ist (vielleicht falsches Wort verwenden) diesen Inhaltstandardmäßig
Alles, was ich will zu sehen, klicken muß, wenn Seite der Lasten Inhalt auf der ersten Show Tab standardmäßig
hoffen undersatnd Sie mich
Do
1. Verwenden style="display:block;" auf der ersten Registerkarte, weil die Logik Ihrer JavaScript-Code funktioniert wie folgt: diese 2 Dinge um das gewünschte Ergebnis zu erzielen. Also beim Laden der Seite wird der Inhalt der 1. Registerkarte immer sichtbar sein und auf der Registerkarte wird es entsprechend funktionieren.
class="tablinks active" zur ersten Registerkarte hinzu, um sie zu aktivieren.
<!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>@empiric ja danke :) –
das funktioniert, weiß es zu schätzen: D –
Alle Ihre .tabcontent Tabs haben ihre display Eigenschaft auf none gesetzt. Ändern Sie die Anzeigeeigenschaft Ihres ersten Tabs in block und es wird standardmäßig angezeigt.
hat nicht funktioniert :( nach dem Ändern '' tbcontent's 'display' Eigenschaft von' none' zu 'block' alles wird standardmäßig im ersten angezeigt Registerkarte –
Ja, nicht auf allen, nur die erste. – sn3ll
Sie können jquery für diese verwenden und diese dann in Skript setzen
$('.tablinks').eq(0).click();
So möchten Sie erste Element standardmäßig ausgewählt werden? –
[Stack Overflow] (https://stackoverflow.com/) ist kein kostenloser Code-Schreibdienst. Von Ihnen wird erwartet, dass Sie ** den Code selbst schreiben **. Nach [mehr Forschung] (http://meta.stackoverflow.com/questions/261592), wenn Sie ein Problem haben, können Sie ** posten, was Sie versucht haben ** mit einer ** klaren Erklärung, was nicht funktioniert ** und Bereitstellung eines [** minimalen, vollständigen und überprüfbaren Beispiels **] (http://stackoverflow.com/help/mcve). –
Ja, ich möchte, dass das erste Element standardmäßig ausgewählt wird. : D –