항상 첫 번째 탭을 표시하는 방법

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> 

자바 스크립트 :

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

한 가지 방법은 초기 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