Open Tab (geordnete Liste) beim Laden?

Ich folge einem Beispiel, um Tabbed Content mit HTML und Javascript zu machen. Hier verlinkt.Open Tab (geordnete Liste) beim Laden?

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs

Mit diesem Beispiel würde ich das London Tab möchte öffnen, sobald die Seite geladen wird. Ich habe mit der aktiven/nicht aktiven Klasse im Javascript-Code herum gespielt, aber ich kann es nicht herausfinden.

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

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; 
} 
</style> 
<body> 

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

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

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

Quelle

2016-08-15 Pyreal

Cud akzeptieren und upvote Antworten, die Sie nützlich fanden. – Iceman

Auslöser ein automatischer Klick auf das Element nach Seite geladen wird:

document.addEventListener("DOMContentLoaded", function() { 
    document.getElementById("default_city_link").click(); 
});

ARBEITS SNIPPET:

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"; 
 
} 
 
document.addEventListener("DOMContentLoaded", function() { 
 
    document.getElementById("default_city_link").click(); 
 
});

body { 
 
    font-family: "Lato", sans-serif; 
 
} 
 
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; 
 
}

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

 
<ul class="tab"> 
 
    <li><a href="#" id="default_city_link" 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>

Quelle

2016-08-15 19:45:12 Iceman

Sie Ihren Code ausführen kann, wenn das Dokument fertig ist, wie folgt aus:

<script> 
$(document).ready(function(){ 
     openCity(event, 'London') 
}); 


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>

Quelle

2016-08-15 19:38:34 ProgrammerV5

Sie auslösen können Ereignis auf der ersten Registerkarte klicken Sie durch den Aufruf click() Funktion. (http://www.w3schools.com/jsref/met_html_click.asp)

body {font-family: "Lato", sans-serif;} 
 

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

<body> 
 

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

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

 
<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"; 
 
} 
 
    
 
document.getElementsByClassName('tablinks')[0].click(); 
 
</script> 
 

 
</body>

Quelle

2016-08-15 19:45:01 Chitrang

Open Tab (geordnete Liste) beim Laden?

Antwort

Verwandte Themen