jQuery Accordion选项卡 - 链接到网站,而不是页面内容

时间:2012-08-12 23:09:29

标签: jquery html

我目前在jQuery手风琴上有5个标签。单击它们会使内容看起来像人们期望的那样。但是,我还想包含指向外部网站的链接。为了保持风格相同,我希望它们看起来像手风琴。我可以让内容包含一个链接,点击这里,但我宁愿让它只是一个外部链接。我能够使用UI Widget并添加手风琴的风格以使其匹配,但是我遇到了两个问题。第一个是UI-Widget选项卡不像手风琴选项卡那样执行鼠标悬停效果。第二个是UI-Widget选项卡中的文本不会与其他选项卡对齐(在浏览器中增加文本大小时也会看到它们相同。)

<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>

1 个答案:

答案 0 :(得分:1)

一种方法是将单独的click事件附加到link元素:

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

这样,其余功能保持不变,您将获得外部链接。有关详情,请参阅jsFiddle

<强>更新

如果您不想要此链接的默认手风琴行为,则可以关闭可能影响该链接的所有其他click事件。类似的东西:

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

请参阅jsFiddle