通过URL访问特定选项卡

Question

我在互联网上发现了jQuery中的选项卡系统，但是制作它（并授权使用它）的人不再可用于联系人，所以这就是为什么我在这里问这个问题的原因。

这是管理不同选项卡的JavaScript代码。

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：

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

默认的JavaScript加载第一个选项卡（tabHeader_1，tabpage_1）。我想要的是，如果我在例如example.com/page.php#tabpage_2中输入example，它会自动加载第二个选项卡。

非常感谢您的帮助。

Answer 1

document.location.hash返回带号码符号（#hash）的散列。
您也不能使用.tabs ul li a作为选择器，因为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。