我写了一个代码,可以将li的类更改为活动状态并在点击时显示正确的内容,但我也希望能够链接访问者以示例:www.socal.nu/index.php #tab2激活tab2。显示选项卡的网址
代码:
$(document).ready(function() {
//Default Action
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
编辑,包括标签列表(X)HTML结构(如发表的OP在注释@slightlymore's answer):
<ul class="tabs">
<li><a href="#tab1">Hem</a></li>
<li><a href="#tab2">Projekt</a></li>
<li><a href="#tab3">Om SOCAL</a></li>
<li><a href="#tab4">Kontakt</a></li>
</ul>
我不使用jQueryUI – 2010-07-02 16:53:28
@Victor-是的,这就是为什么我在顶部添加信息。我将删除jQueryUI部分。您使用'window.location.hash'从URL获取信息。 – user113716 2010-07-02 17:12:24
@Victor - 用适合您的HTML的几个解决方案更新了我的答案。 – user113716 2010-07-02 17:48:24