0

私はまだ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;
}
4

2 に答える 2

0

ここで答えを見つけることができます。https://forum.jquery.com/topic/two-instances-of-tabs-on-one-page

于 2015-03-27T19:16:44.200 に答える
0

jQuery プラグインを作成できます。例えば：

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

そして、これを次のように呼び出します。

$('.tabbed_box').tabbedBox()

プラグイン内で jquery 呼び出しを にバインドするためthis、このページの他の要素 (他のタブ付きボックスなど) に影響を与えることなく、コードを再利用できます。

于 2013-07-31T00:51:09.060 に答える