いつも最初のTABを表示するには

Question

「詳細」タブであるページが読み込まれるたびに常に最初のタブを表示したいと思いますか？私はpageloadで実行されるJavaScriptを追加しようとしましたが、私が望むようにうまくいきませんでした。

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

は、次のコードを試してみましたが、それは動作しませんでした：

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

Answer 1

1つの方法は、最初のHTMLでボタンのクリックを模倣するスタイル要素を追加することです。

ボタンをtablinkするアクティブクラスを追加jQueryのコード削除

Answer 2

このコードは、のために働く必要があります君は。

$(document).ready(function(){ 

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

Answer 3

を助けタブのコンテンツ

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

希望に表示スタイルを追加

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

：

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

をまたは追加JQあなたのコードにueryライブラリ

Answer 4

あなたはあなたのコードの小さな修正で目標を達成することができます。 JQueryとJavaScriptの両方の構文を使用しているわけではないので、コードにJQueryを組み込んだと仮定します。

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> 

スクリプト

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