删除在单击其他选项卡时生成的url查询元素的一部分

Remove part of the url query element that is generated when clicking on other tabs

本文关键字：url 查询 一部分 元素 单击 其他 选项 删除      更新时间：2023-09-26

我正在使用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（仅用于链接选项卡），如{domainname}/{controller}/{method}/{articleId}#contentLinks选项卡，示例：

  • http://www.test.com/site/shipping/5/#contentLinks-选项卡
  • http://www.test.com/site/delivery/3/#contentLinks-选项卡

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

请告诉我，即使我在链接选项卡上，并悬停在选项卡的其余部分，我如何删除/发货/5/？很抱歉，我无法提供太多的编码，因为我不知道该怎么做。因此，真的很感激有人能给我带来一些启发。非常感谢。

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

无论如何，这有点麻烦，但您可以尝试使用javascript更改主页和留言簿链接的href属性。所以首先给主页和留言簿链接ID:

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

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

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

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

或者，如果这不起作用（在jsFiddle上使用这样的插件时很难判断），你可能会变得更加愤怒，转而在主页和留言簿选项卡中添加onclick监听器：

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

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

希望这能有所帮助。

相关文章：