您需要为此依赖 url,我们有很棒的框架,如骨干网.js 路由,甚至还有类似 history.js 的插件
但是如果没有这个插件,你可以从 url 中获取 hash bang,并为列表应用与之对应的活动样式。
为了做到这一点,HTML 必须是这样的,
<ul id="ulid" class="">
<li class="">
<a href="#tab=one" id="one" class="active">text1</a>
</li>
<li>
<a href="#tab=two" id="two" class="">text2</a>
</li>
<li>
<a href="#tab=three" id="three" class="">text3</a>
</li>
<li>
<a href="#tab=four" id="four" class="">text4</a>
</li>
<li>
<a href="#tab=five" id="five" class="">text5</a>
</li>
<li>
<a href="#tab=six" id="six" class="">text6</a>
</li>
</ul>
活动类 css 可能在哪里:.active{background-color: red;}
获得哈希爆炸的简短代码是:
function parseHashBangArgs(aURL) {
aURL = aURL || window.location.href;
var vars = {};
var hashes = aURL.slice(aURL.indexOf('#') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
var hash = hashes[i].split('=');
if(hash.length > 1) {
vars[hash[0]] = hash[1];
} else {
vars[hash[0]] = null;
}
}
return vars;
}
然后您可以在页面加载时运行此代码
$('ul#ulid li a').click(function(){
$('li a').removeClass('active');
$(this).addClass('active');
});
var selectedTab = parseHashBangArgs(window.location.href).tab;
if(selectedTab){
$('li a').removeClass('active');
$('#'+selectedTab).addClass('active');
}
它完成了!