0

我正在使用 jquery tabify http://unwrongest.com/projects/tabify/来为我的菜单创建一个类似标签的功能。

演示：http: //jsfiddle.net/janjarfalk/6Y6Pa/1/

我正在创建这样的菜单：

<ul id="menu">
<li class="active"><a href="#contentHome">Home</a></li>
<li><a href="#contentGuestbook">Guestbook</a></li>
<li><a href="#contentLinks">Links</a></li>
</ul>
<div class="content" id="contentHome">Content for Home</div>
<div class="content" id="contentGuestbook">My guestbook</div>
<div class="content" id="contentLinks">Links</div>

选项卡将作为锚链接自动添加到我的 url，读取我在我的 url 上的任何内容。我需要一个 url（仅适用于链接选项卡），例如{domain name}/{controller}/{method}/{articleId}#contentLinks-tab，示例：

而其余的只有http://www.test.com/site#home-tab等。正如您从演示中看到的那样，“{id}-tab”是根据 id 自动生成的。但是，如果我已经在链接页面的http://www.test.com/links/shipping/5/#contentLinks-tab上，并且如果我要转到留言簿或主页等其他选项卡，则会出现问题/shipping/5/#contentHome-tab 将紧随其后。

请告诉我如何删除 /shipping/5/ 即使我在链接选项卡上，并悬停在选项卡的其余部分？抱歉，我无法提供太多编码，因为我不知道这样做。因此，真的很感激有人可以发光。非常感谢。

4

1 回答 1

0

这是一个很难回答的问题，因为 jsFiddle 显然缺少/shipping/5URL 的一部分；如果理解正确，我们基本上是在尝试更改插件的功能。

无论如何，这有点 hacky，但您可以尝试href使用 javascript 更改 Home 和 Guestbook 链接的属性。所以首先给出 Home 和 Guestbook 链接 ID：

<a href="#contentHome" id="home">Home</a>
<a href="#contentGuestbook" id="guestbook">Guestbook</a>

然后在 Tabify 初始化后使用 jQuery 替换 URL：

$('#menu').tabify();
$('#home').attr('href','/site#contentHome-tab');
$('#guestbook').attr('href','/site#contentGuestbook-tab');

这相当于http://www.test.com/site#contentHome-tab等，有效地摆脱了 URL 中不需要的部分。

或者，如果这不起作用（在 jsFiddle 上使用这样的插件时很难判断），您可能会变得更加 hacky，而是将 onclick 侦听器添加到 Home 和 Guestbook 选项卡：

$('#home').click(function() {
  window.location.href = "/site#contentHome-tab";
});​

我通常不会做这样的事情，但是当你使用插件时，有时你必须有点hacky才能达到预期的效果=P

希望这可以帮助。

于 2012-07-09T04:35:10.777 回答