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，因此您的代码可以重复使用而不会影响此页面上的其他元素（例如您的其他选项卡式框）。