1

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>

4

2 に答える 2

0

それはあなたの要件に従って動作します

追加するだけ

        <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ます。

于 2012-05-21T07:08:32.043 に答える
0

タブのコンテンツ内のリンクによってタブが強制的に切り替えられるようにするには、内部で何が起こっているのかを理解して、デフォルトで切り替えるようにすることが役立ちます。

デフォルトでは、マウスオーバー イベントによってタブが強制的に変更されます。したがって、解決策は、タブ コンテンツのハイパーリンクにイベントをバインドすることで、問題のハイパーリンクの既定のクリック イベントをオーバーライドすることです。

質問で示した JavaScript コードの後に​​、 $(document).ready 内に次のコードを含めます。

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

event.preventDefault() は、ハイパーリンクが href 属性に入力されたページにリダイレクトしようとするのを防ぎます。rel 属性は、リンク先の特定のタブにハイパーリンクをバインドする方法として使用されます。

rel 属性を使用してタブの id の値を取得し、プログラムでマウスオーバー イベントを呼び出してタブを切り替えることができます。

<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) と等しくなければなりません。

于 2012-05-21T02:42:37.943 に答える