Wie immer immer die erste TAB

Question

Ich möchte die erste Registerkarte immer zeigen, wann immer die Seite laden, das ist die Registerkarte "Details", eine Idee, es zu tun? Ich habe versucht, JavaScript hinzugefügt, die auf Pageload läuft, aber es hat nicht funktioniert, wie ich es wünsche.

HTML:

<ul class="tab"> 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Details')">Details</a></li> 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Reviews')">Reviews</a></li> 
</ul> 

<div id="Details" class="tabcontent"> 
    <h3>Details</h3> 
    <p>London is the capital city of England.</p> 
</div> 

<div id="Reviews" class="tabcontent"> 
    <h3>Reviews</h3> 
    <p>Paris is the capital of France.</p> 
</div> 

JavaScript:

function getFirstChildWithTagName(evt, tagName) { 
    for (var i = 0; i < element.childNodes.length; i++) { 
    if (element.childNodes[i].nodeName == tagName) return element.childNodes[i]; 
    } 
} 

function openTab(evt, tabName) { 
    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 < tabcontent.length; i++) { 
    tablinks[i].classList.remove("active"); 
    } 
    document.getElementById(tabName).style.display = "block"; 
    evt.currentTarget.classList.add("active"); 
} 

$(document).ready(function() { 
    $('.tablinks:first').addClass('active'); 
}); 

den folgenden Code versucht, aber es hat nicht funktioniert:

function LoadFunction() { 
    var mybtn = document.getElementsByClassName("tablinks")[0]; 
    mybtn.click(); 
} 
window.onload = LoadFunction(); 

Answer 1

Ein Ansatz besteht darin, Stilelemente hinzuzufügen, die den Klick-Klick im ursprünglichen HTML nachahmen.

hinzufügen aktive Klasse Taste tablink

<li><a href="javascript:void(0)" class="tablinks active" onclick="openTab(event, 'Details')">Details</a></li> 

Inhaltsanzeige Stil Registerkarte hinzufügen

<div id="Details" class="tabcontent" style="display:block"> 

Hoffnung, die

Answer 2

Dieser Code sollte für Arbeit Sie.

$(document).ready(function(){ 

    $('.tab li:first-child').find('a').addClass('active'); 
    $('.tabcontent').hide(); 
    $('.tabcontent:first-child').show(); 
}); 

Answer 3

entfernen jQuery-Code hilft:

$(document).ready(function() { 
    $('.tablinks:first').addClass('active'); 
}); 

oder hinzufügen jQ sehr Bibliothek zu Ihrem Code

Answer 4

Sie können erreichen Sie Ziel mit kleinen Korrektur in Ihrem Code. Bitte beachten Sie, dass Sie sowohl die JQuery- als auch die JavaScript-Syntax verwenden. Daher nehme ich an, dass Sie JQuery in Ihren Code aufgenommen haben.

html

<ul class="tab"> 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Details')">Details</a></li> 
    <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Reviews')">Reviews</a></li> 
</ul> 

<div id="Details" class="tabcontent"> 
    <h3>Details</h3> 
    <p>London is the capital city of England.</p> 
</div> 

<div id="Reviews" class="tabcontent"> 
    <h3>Reviews</h3> 
    <p>Paris is the capital of France.</p> 
</div> 

Skript

function getFirstChildWithTagName(evt, tagName) { 
    for (var i = 0; i < element.childNodes.length; i++) { 
    if (element.childNodes[i].nodeName == tagName) return element.childNodes[i]; 
    } 
} 

function openTab(elem, tabName) { 
    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 < tabcontent.length; i++) { 
    tablinks[i].classList.remove("active"); 
    } 
    document.getElementById(tabName).style.display = "block"; 
    console.log(elem) 
    $(elem[0]).addClass("active"); 
} 

$(document).ready(function() { 
    var elem = $('.tablinks:first'); 
    var tabName = "Details" 
    openTab(elem,tabName); 
}); 

Plunker: http://plnkr.co/edit/G8Kw76nvK4Xsz8oY6fRQ?p=preview