Question

我是jquery的新手，我已将此代码用于标签

<script type="text/javascript" charset="utf-8">
    $(function () {
        var tabContainers = $('div.tabs > div');
        tabContainers.hide().filter(':first').show();

        $('div.tabs ul.tabNavigation a').click(function () {
            tabContainers.hide();
            tabContainers.filter(this.hash).show();
            $('div.tabs ul.tabNavigation a').removeClass('selected');
            $(this).addClass('selected');
            return false;
        }).filter(':first').click();
    });


</script>

我需要的是能够在打开网址时加载特定标签： www.mysite.com/page.html#tab1

html链接如下所示：

<a href="#tab1" class="selected">name link</a>
<a href="#tab2" class="">name link2</a>
<a href="#tab3" class="">name link3</a>

我尝试了很多脚本，但也许是我的错（我是一个带javascript的家伙）

提前谢谢

Answer 1

JQuery-UI有一个tab-widget你可以使用。

比编写自己更简单，更稳定。

对于不同的网址，请查看this post。

它告诉您如何利用UI主题并加载不同的URl。

否则您必须在标签

中的点击事件上执行$('#theIdOfTheDiv').load(url)

Answer 2

默认情况下，您要显示的标签应在HTML中具有selected类。相关内容包装器也应如此。其他人不应该。

Answer 3

window.location有一个哈希属性。因此，您可以针对空字符串进行检查，如果它不为空，请选择该选项卡：

if(!window.location.hash === "")
    $(window.location.hash).show();

Answer 4

您需要一个像<a href="#tab1">click to see tab1</a>
您需要将用户重定向到＃tab1，因此您必须删除功能的return false;行，以禁用重定向
单击<a>时会触发您的功能，您需要在加载页面时再触发它

你的功能看起来像这样

$(function(){
    onClickHandler = function() {
      $('div.tabs > div').hide();
      $(window.location.hash).show();
    }
    $('div.tabs ul.tabNavigation a').click(onClickHandler);
    onClickHandler();
});

jquery add on page load show requested tab功能

4 个答案: