带有导航和选项卡的 jQuery 地址插件

Posted 2023-05-07

【中文标题】带有导航和选项卡的 jQuery 地址插件

【英文标题】：jQuery Address Plugin with Navigation and Tabs

【发布时间】：2013-08-21 20:35:13

【问题描述】：

我在使用 jQuery 地址插件时遇到了一点问题。

我必须同时将它添加到导航和选项卡中。

有两个问题我似乎无法弄清楚。

1）点击导航元素时，不是将位置路径更改为链接的路径+href，而是像这样添加“home.html#/about.html”。

2) 当我们转到选项卡部分时，它们会更改为“id”，但由于页面未从 location.path 更改，因此会将其添加到单击的第一个页面。 => "home.html#direction-tab" 发生这种情况时，我无法链接到该选项卡，因为它指向主页而不是联系页面。

我阅读了有关选项卡的文档（使用 jQuery UI），但由于 html 结构有点不同，我更喜欢将其添加为自定义。

JS：

$.address.change(function(event) 
    if ( event.value != undefined && event.value != '/' ) 
        $('#content').load(event.value.replace(/\//,'')+ ' #content')
    
)

我尝试为链接添加标题并像实时站点中的示例一样使用它们，但我似乎并没有完全理解其背后的逻辑。

jsFiddle

【参考方案1】：

看来我想通了。

$(document).on('click', '.tabs a', function() 
    var internal_path = $(this).attr('rel').replace(/\w+\:/, '');
    var href = $(this).attr('href');
    $.address.value(internal_path+href);
    return false;
);