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 - 鏈接到網站，而不是頁面內容

回答

相關問題