jquery 添加页面加载显示请求的选项卡功能

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 可以使用。

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

对于不同的 URL，请查看这篇文章。

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

否则，您必须对选项卡中的点击事件执行 $('#theIdOfTheDiv').load(url)

Answer 2

1. 您需要一个像点击查看tab1

2. 您需要将用户重定向到 #tab1，因此必须删除您的 return false; 行禁用重定向的函数

3. 您的函数正在被触发当点击时，需要在页面加载时再次触发

您的功能将如下所示

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

Answer 3

您希望默认显示的选项卡在 HTML 中应具有 selected 类。相关的内容包装器也应该如此。其他人不应该。

Answer 4

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

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