URL을 통해 특정 탭에 액세스

Question

인터넷에서 jQuery에서 탭 시스템을 발견했지만이를 만든 사람 (사용 권한이 있음)은 더 이상 연락 할 수 없으므로 여기에서이 질문을합니다.

이것은 다른 탭을 관리하는 자바 스크립트 코드입니다. 기본적으로

  <div class="tabs"> 
      <ul> 
       <li id="tabHeader_1">Les listes</li> 
       <li id="tabHeader_2">Les membres</li> 
      </ul> 
     </div> 
<div class="tabscontent"> 
      <div class="tabpage" id="tabpage_1"> 
       <h2>Les listes</h2> 
       <p>Pellentesque habitant morbi tristique senectus...</p> 
      </div> 
      <div class="tabpage" id="tabpage_2"> 
       </div> 

은 자바 스크립트가 첫 번째 탭 (tabHeader_1, tabpage_1)를로드 :

window.onload=function() {​ 



// get tab container 
    var container = document.getElementById("tabContainer"); 
    if (document.location.hash.length) { 
     $('.tabs ul li a[href^="' + document.location.hash + '"]').click(); 
    } 
// set current tab 
var navitem = container.querySelector(".tabs ul li"); 
//store which tab we are on 
var ident = navitem.id.split("_")[1]; 
navitem.parentNode.setAttribute("data-current",ident); 
//set current tab with class of activetabheader 
navitem.setAttribute("class","tabActiveHeader"); 

//hide two tab contents we don't need 
var pages = container.querySelectorAll(".tabpage"); 
for (var i = 1; i < pages.length; i++) { 
    pages[i].style.display="none"; 
} 

//this adds click event to tabs 
var tabs = container.querySelectorAll(".tabs ul li"); 
for (var i = 0; i < tabs.length; i++) { 
    tabs[i].onclick=displayPage; 
} 
} 

// on click of one of tabs 
function displayPage() { 
    var current = this.parentNode.getAttribute("data-current"); 
    //remove class of activetabheader and hide old contents 
    document.getElementById("tabHeader_" + current).removeAttribute("class"); 
    document.getElementById("tabpage_" + current).style.display="none"; 

    var ident = this.id.split("_")[1]; 
    //add class of activetabheader to new active tab and show contents 
    this.setAttribute("class","tabActiveHeader"); 
    document.getElementById("tabpage_" + ident).style.display="block"; 
    this.parentNode.setAttribute("data-current",ident); 
} 

이

은 HTML입니다. 예를 들어 example.com/page.php#tabpage_2 url에 두 번째 탭을 자동으로로드하면됩니다.

도움을 주셔서 감사합니다.

Answer 1

document.location.hash은 숫자 기호 (#hash)가있는 해시를 반환합니다.
li 안에 a 태그가 없기 때문에 .tabs ul li a을 선택 자로 사용할 수 없습니다. 사용

봅니다 :

var hash = document.location.hash.substr(1); // skip 1 character (the number sign) 
$('.tabs ul li[id^="' + hash + '"]').click(); 

또한,이 스크립트는 in jQuery 없습니다. 전체 스크립트에서 1 개의 jQuery 함수 만 사용합니다. 나는 jQuery보다 더 순수한 JavaScript를 고려할 것이다.