jQuery Accordion Tab - 链接到网站，而不是页面内容

我目前在我的jQuery Accordion上有5个选项卡。点击它们会导致内容出现像预期的那样。不过，我也想包括外部网站的链接。为了保持风格一致，我想让它们看起来像手风琴一样。我可以让内容包含一个链接，点击这里，但我宁愿让它只是一个外部链接。我能够使用UI Widget并添加手风琴的风格来匹配，但是我遇到了两个问题。首先是UI-Widget选项卡不会像手风琴选项卡那样实现鼠标移过效果。第二个是，在UI的小部件选项卡中的文本将不会与其他标签对齐（也看它是相同的，当文字大小在浏览器中增加。）jQuery Accordion Tab - 链接到网站，而不是页面内容

<a href="http://apple.com/"> 
<div class="ui-widget" style="margin: 0px 20px;"> 
    <div class="ui-state-default ui-corner-all" style="margin: 0px; padding: .5em;"> 
     <h3 class="ui-helper-reset" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1"><span class="ui-icon ui-icon-extlink" style="float: left;"></span><a href="#">Apple</a></h3></div> 
</div> 
</a>

来源

2012-08-12 michaellindahl

一种方法是附加单独click事件链接元素：

$("#linkId").click(function() { 
    window.location.href = "http://apple.com/"; 
});

这样，其他的功能保持不变，你会得到一个外部链接。有关更多信息，请参阅jsFiddle。

UPDATE

如果你不希望此链接默认手风琴的行为，你可以关闭所有其他click事件可能会影响它。例如：

$("#linkId").parentsUntil("#accordion").off("click");

请参阅jsFiddle。

来源

2012-08-13 00:39:42 mhusaini

我几乎宁愿使用一个风格化的UI-Widget，因为它看起来是一样的，就像一个没有翻转功能的链接。使用您的方法，链接依然会打开，并在快速重定向之前不显示任何内容。 – michaellindahl 2012-08-13 21:12:42

此外，您可以通过解除影响此链接的所有其他点击事件来覆盖手风琴行为。我会更新答案。 – mhusaini 2012-08-13 22:50:31

更好。只需使用：'$（“。link”）。parentsUntil（“＃accordion”）。off（“click”）;'如果已经在href HTML中完成，则无需在JavaScript中指定链接位置。 – michaellindahl 2012-08-30 05:01:33

jQuery Accordion Tab - 链接到网站，而不是页面内容

回答

相关问题