我目前正在开发的网站上有一个选项卡式部分,并且希望为每个选项卡启用唯一的 URL,以及历史支持。
看来jQuery地址插件是要走的路,但我在实现它时遇到了麻烦。我能够分配 URL 并更改地址栏。后退按钮会遍历 URL,但实际上不会更改选项卡。
地址文档不是很好。我假设我缺少某种事件侦听器,但我不确定如何初始化它或将它应用到什么。
这是我的 JS
$('.sm-tab').click(function() {
$.address.value($('a', this).attr('href'));
smReset();
$('#sm-tabs').find('.active').each(function() {
$(this).removeClass('active');
$(this).addClass('inactive');
});
$(this).removeClass('inactive');
$(this).addClass('active');
var smClassArray = $(this).attr('class').split(" ");
var smDivClass = smClassArray[1];
$('#'+smDivClass).show();
});
我的 HTML 看起来像这样
<div id="sm-tabs">
<div class="sm-tab inactive twitter">
<span class="twitter sprite-sm-twitter"><a href="?tab=twitter" class="hidetext">Twitter</a></span>
</div>
<div class="sm-tab inactive youtube">
<span class="youtube sprite-sm-youtube"><a href="?tab=youtube" class="hidetext">YouTube</a></span>
</div>
</div>
<div id="sm-widgets">
<div id="twitter">
Content
</div>
<div id="youtube">
Content
</div>
</div>