jQuery垂直選項卡-創建指向選項卡的附加鏈接

Question

我正在將此腳本用於jQuery Vertical Tabs。

http://www.scriptbreaker.com/javascript/script/JQuery-vertical-tab-menu

<script language="JavaScript">
$(document).ready(function() {

$(".tabs .tab[id^=tab_menu]").hover(function() {
    var curMenu=$(this);
    $(".tabs .tab[id^=tab_menu]").removeClass("selected");
    curMenu.addClass("selected");

    var index=curMenu.attr("id").split("tab_menu_")[1];
    $(".curvedContainer .tabcontent").css("display","none");
    $(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>

這是標簽（鏈接）的HTML

<div class="tabscontainer">
 <div class="tabs">
     <div class="tab selected first" id="tab_menu_1">
         <div class="link">JavaScript</div>
         <div class="arrow"></div>
     </div>
     <div class="tab" id="tab_menu_2">
         <div class="link">CSS</div>
         <div class="arrow"></div>
     </div>
      <div class="tab last" id="tab_menu_3">
         <div class="link">JQuery</div>
         <div class="arrow"></div>
     </div>
</div>

我正在嘗試從選項卡內容中創建到另一個選項卡的附加鏈接。

這樣，我可以鏈接到下一個標簽或最后一個標簽，並保持與當前標簽鏈接相同的功能（不刷新）

這是我關於stackoverflow的第一個問題，已經進行了廣泛搜索。

我真的很感謝所有幫助。 這是一個很棒的社區。

更新：

好的，這是我的完整代碼的編輯內容：

<script type="text/javascript">
$(document).ready(function() {

$(".tabs .tab[id^=tab_menu]").click(function() {
    var curMenu=$(this);
    $(".tabs .tab[id^=tab_menu]").removeClass("selected");
    curMenu.addClass("selected");

    var index=curMenu.attr("id").split("tab_menu_")[1];
    $(".curvedContainer .tabcontent").css("display","none");
    $(".curvedContainer #tab_content_"+index).css("display","block");

});

});
</script>

<div class="curvedContainer">       

<div class="tabcontent" id="tab_content_1" style="display:block">
<p>text</p> 
</div>

<div class="tabcontent" id="tab_content_2">
<p>text</p>
</div>

<div class="tabcontent" id="tab_content_3">
<p>text</p>
</div>

<div class="tabcontent" id="tab_content_4"><h2 class="wwd_title">
<p>text</p> 
</div>  

</div>

<div class="tabscontainer">

<div class="tabs">         
<div class="tab selected first" id="tab_menu_1">             
<div class="link">Onefish</div>       
</div>         
<div class="tab" id="tab_menu_2">             
<div class="link">Twofish</div>                   
</div>         
<div class="tab" id="tab_menu_3">             
<div class="link">Redfish</div>         
</div>          
<div class="tab last" id="tab_menu_4">             
<div class="link">Bluefish</div>                     
</div>    
</div>  

Answer 1

為了使選項卡內容中的鏈接強制切換選項卡，這有助於了解幕后情況，以使默認情況下它們切換。

默認情況下，鼠標懸停事件會強制更改選項卡。 因此，解決方案是通過將事件綁定到選項卡內容中的超鏈接來覆蓋有問題的超鏈接的默認click事件：

在問題中顯示的JavaScript代碼之后，在$（document）.ready內包含此代碼 ：

$('.tabcontent').find('a').click(function() {
    event.preventDefault();
    $('.tabs #' + $(this).attr("rel")).mouseover();
});

event.preventDefault（）防止超鏈接嘗試重定向到href屬性中輸入的頁面，而rel屬性用作將超鏈接綁定到要鏈接到的特定選項卡的方式。

rel屬性用於獲取選項卡ID的值，因此我們可以以編程方式調用其mouseover事件，並切換選項卡。

<div class="tabscontainer">
 <div class="tabs">
     <div class="tab selected first" id="tab_menu_1">
         <div class="link">JavaScript</div>
         <div class="arrow"></div>
     </div>
     <div class="tab" id="tab_menu_2">
         <div class="link">CSS</div>
         <div class="arrow"></div>
     </div>
      <div class="tab last" id="tab_menu_3">
         <div class="link">JQuery</div>
         <div class="arrow"></div>
     </div>          
</div>
    <div class="curvedContainer">
        <div class="tabcontent" id="tab_content_1" style="display:block">content for tab 1 <a href="#" rel="tab_menu_2"> tab2</a></div>
        <div class="tabcontent" id="tab_content_2">content for tab 2</div>
        <div class="tabcontent" id="tab_content_3">content for tab 3</div>
    </div>

在選項卡的HTML內容中，只需像平常一樣使用href =“＃”和rel屬性來包含超鏈接。 rel屬性必須等於目標選項卡的ID，在這種情況下為tab_menu_2。

Answer 2

根據您的要求工作

只需添加

        <div class="tabs">
             <div class="tab selected first" id="tab_menu_1">
                 <div class="link">JavaScript</div>
                 <div class="arrow"></div>
             </div>
        </div>

在任何標簽中

轉到此鏈接http://jsfiddle.net/ipsjolly/ssR5f/

在3rd標簽中有一個類似的標簽，通過它我們可以跳到1st標簽。