问题描述
我在Internet上的jQuery中找到了一个标签系统,但是创建它(并授权使用它)的人现在不再可以联系,所以这就是为什么我在这里问这个问题.
I found a tab system in jQuery on the internet but the guy who made it (and authorized it's use) isn't available for contact anymore, so this is why I ask this question here.
这是我的javascript的代码,用于管理不同的标签.
This is the code of my javascript that manages the different tabs.
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中,它将自动加载第二个标签.
By default, the javascript loads the FIRST tab (tabHeader_1, tabpage_1). What I'd like is if I put for example in the url example.com/page.php#tabpage_2, it loads automatically the second tab.
非常感谢您的帮助.
推荐答案
document.location.hash
返回带有数字符号(#hash)的哈希.
您也不能使用.tabs ul li a
作为选择器,因为li
内没有a
标记.
document.location.hash
returns the hash with the number sign (#hash).
You also can't use .tabs ul li a
as the selector because there is no a
tag inside of the li
.
尝试使用:
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.
Also, this script isn't in jQuery
. It only uses 1 jQuery function throughout the whole script. I would consider this more pure JavaScript than jQuery.
这篇关于通过URL访问特定标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!