jquery在一個頁面上的多個選項卡框

Question

我仍然在學習jQuery的基礎知識，並且設法使此選項卡框在一個頁面上的單個選項卡框中工作，但我需要在頁面上放置多個選項框。 當我在頁面上放置多個選項卡時，它會隱藏除選定選項卡外的所有選項卡框上的所有內容。 如何修改我的jQuery，使其隱藏選定選項卡區域上的選項卡，並且不隱藏其他選項卡區域上的所有內容框？

HTML：

<div id="tabbed_box_1" class="tabbed_box"> 
<div class="tabbed_area"> 

    <ul class="tabs"> 
     <li><a href="#" title="content_1" class="tab active">name</a></li> 
     <li><a href="#" title="content_2" class="tab">about</a></li> 
     <li><a href="#" title="content_3" class="tab">skills</a></li> 
    </ul> 

    <div id="content_1" class="content"> 
     <p>name 1</p> 
    </div> 

    <div id="content_2" class="content"> 
     <p>about 1</p> 
    </div> 

    <div id="content_3" class="content"> 
     <p>skills 1</p> 
    </div> 

</div><!--END Tabbed_area--> 

</div><!--END Tabbed_box_1--> 

    <div id="tabbed_box_2" class="tabbed_box"> 
    <div class="tabbed_area"> 

    <ul class="tabs"> 
     <li><a href="#" title="content_4" class="tab active">name</a></li> 
     <li><a href="#" title="content_5" class="tab">about</a></li> 
     <li><a href="#" title="content_6" class="tab">skills</a></li> 
    </ul> 

    <div id="content_4" class="content"> 
     <p>name 2</p> 
    </div> 

    <div id="content_5" class="content"> 
     <p>about 2</p> 
    </div> 

    <div id="content_6" class="content"> 
     <p>skills 2</p> 
    </div> 

    </div><!--END Tabbed_area--> 

    </div><!--END Tabbed_box_2--> 

的jQuery：

$(document).ready(function(){ 
    $("a.tab").click(function() { 

     // switch all tabs off 
     $(".active").removeClass("active"); 

     // switch this tab on 
     $(this).addClass("active"); 

     // slide all elements with the class 'content' up 
     $(".content").slideUp(); 

     //Get attribute value and find the element with that id. Then slide that down. 
     var content_show = $(this).attr("title"); 
     $("#"+content_show).slideDown(); 

    }); 

    $("a.tab").focus(function() { 

     // switch all tabs off 
     $(".active").removeClass("active"); 

     // switch this tab on 
     $(this).addClass("active"); 

     // slide all elements with the class 'content' up 
     $(".content").slideUp(); 

     // Now figure out what the 'title' attribute value is and find the element with that id. Then slide that down. 
     var content_show = $(this).attr("title"); 
     $("#"+content_show).slideDown(); 

    }); 

    }); 

CSS：

ul.tabs { 
margin: 5px 0 6px; 
padding: 0; 
} 
ul.tabs li { 
display: inline; 
list-style: none outside none; 
} 
ul.tabs li a { 
background-color: #464C54; 
background-image: url("images/tab_off.jpg"); 
background-position: center bottom; 
background-repeat: repeat-x; 
border: 1px solid #464C54; 
color: #FFEBB5; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 9px; 
font-weight: bold; 
padding: 8px 14px; 
text-decoration: none; 
text-transform: uppercase; 
} 

ul.tabs li a:hover { 
background-color: #2F343A; 
border-color: #2F343A; 
} 

ul.tabs li a.active { 
background-color: #FFFFFF; 
border-color: #464C54 #464C54 #FFFFFF; 
border-style: solid; 
border-width: 1px; 
color: #282E32; 
} 

.content { 
background-color: #FFFFFF; 
border: 1px solid #464C54; 
font-family: Arial,Helvetica,sans-serif; 
padding: 10px; 
} 

#content_2, #content_3, #content_5, #content_6 { 
display: none; 
} 

Answer 1

在這裏你可以找到答案。 https://forum.jquery.com/topic/two-instances-of-tabs-on-one-page

Answer 2

您可以創建一個jQuery plugin。例如：

$.fn.tabbedBox = function() {…} 

然後調用此類似：

$('.tabbed_box').tabbedBox() 

由於內你的插件您綁定您的jQuery調用this，你的代碼是在不影響本網頁上的其他元素重複使用（如你的其他標籤框）。