Вертикальные вкладки JQuery - создать дополнительную ссылку на вкладку

Я использую этот скрипт для вертикальных вкладок jQuery.

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>  


person Lawrence Black    schedule 20.05.2012    source источник
comment
Пожалуйста, опубликуйте код, который вы пробовали до сих пор, чтобы достичь того, чего вы хотите достичь. (Код, который вы разместили, является кодом меню вертикальной вкладки.)   -  person neo108    schedule 21.05.2012
comment
В качестве примечания: правильный тег скрипта должен выглядеть как <script type="text/javascript">. Атрибут языка устарел и не может гарантировать, что ваш браузер будет использовать последнюю версию JavaScript.   -  person jmort253    schedule 21.05.2012
comment
@ neo108 Спасибо. Полный код добавлен.   -  person Lawrence Black    schedule 21.05.2012


Ответы (2)


Чтобы ссылки в содержимом вкладок заставляли вкладки переключаться, это помогает понять, что происходит под капотом, чтобы они переключались по умолчанию.

По умолчанию события наведения курсора заставляют вкладки изменяться; поэтому решение состоит в том, чтобы переопределить событие щелчка по умолчанию для рассматриваемых гиперссылок, привязав событие к гиперссылкам в содержимом вкладки:

Включите этот код после кода JavaScript, который вы указали в своем вопросе, внутри $ (document) .ready:

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

Событие event.preventDefault () предотвращает попытки гиперссылок перенаправить на страницу, указанную в атрибуте href, а атрибут rel используется как способ привязать гиперссылку к конкретной вкладке, на которую указывает ссылка.

Атрибут rel используется для получения значения идентификатора вкладки, чтобы мы могли программно вызывать его событие наведения курсора и переключать вкладки.

<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 должен быть равен идентификатору целевой вкладки, в данном случае tab_menu_2.

person jmort253    schedule 21.05.2012
comment
Спасибо, что ответили. Хорошо, я попробовал, но безуспешно. Возможно, я неправильно добавил скрипт. В любом случае, я обновил свой вопрос полным кодом. - person Lawrence Black; 21.05.2012

Работает в соответствии с вашими требованиями

Просто добавь

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

person Code Spy    schedule 21.05.2012
comment
У меня появилась идея использовать существующие классы для вставки вкладки внутри другого, но я не собираюсь этого делать. Спасибо. - person Lawrence Black; 21.05.2012