1

jquery関数

(function ( $ ) {


$.fn.tabbed = function() {

    return this.each(function() { 

    $("a.tab").one('click focus',function (event) {
        event.preventDefault();
        // switch all tabs off
        $(".active").removeClass("active");

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

        // slide all elements with the class 'content' up
        $(".tab_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();

    });

    });
};

}( jQuery ));

HTML 

    <ul class="tabs">
        <li><a href="#" title="content_1" class="tab active">1</a></li>
        <li><a href="#" title="content_2" class="tab">2</a></li>
        <li><a href="#" title="content_3" class="tab">3</a></li>
    </ul>

    <div id="content_1" class="tab_content">
        <p>1</p>
    </div>
    <div id="content_2" class="tab_content">
       <p>2</p>
    </div>
    <div id="content_3" class="tab_content">
       <p>3</p>
    </div>

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


    <ul class="tabs">
        <li><a href="#" title="content_4" class="tab active">4</a></li>
        <li><a href="#" title="content_5" class="tab">5</a></li>
        <li><a href="#" title="content_6" class="tab">6</a></li>
    </ul>

    <div id="content_4" class="tab_content">
        <p>4</p>
    </div>
    <div id="content_5" class="tab_content">
       <p>5</p>
    </div>
    <div id="content_6" class="tab_content">
       <p>6</p>
    </div>

</div>

CSS:

  #tab_box_1 {
margin: 0 auto;
width: 300px;
}

#tab_box_2 {
margin: 0 auto;
width: 300px;
}
.tab_box h4 {
color: #FFFFFF;
font-family: Arial,Helvetica,sans-serif;
font-size: 23px;
letter-spacing: -1px;
margin-bottom: 10px;
}
.tab_box h4 small {
color: #E3E9EC;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 9px;
font-weight: normal;
left: 6px;
letter-spacing: 0;
position: relative;
text-transform: uppercase;
top: -4px;
}
 .tab_area {
background-color: #red;
border: 1px solid #494E52;
padding: 8px;
}
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 {
 -moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #FFFFFF;
background-image: url("images/tab_on.jpg");
background-position: center top;
background-repeat: repeat-x;
border-color: #464C54 #464C54 #FFFFFF;
border-style: solid;
border-width: 1px;
color: #282E32;
}
.tab_content {
background-color: #FFFFFF;
background-image: url("images/content_bottom.jpg");
background-position: center bottom;
background-repeat: repeat-x;
border: 1px solid #464C54;
font-family: Arial,Helvetica,sans-serif;
padding: 10px;
}
#content_2, #content_3, #content_5, #content_6 {
display: none;
 }

クリックするとjqueryが2回起動し、ボックスが2回スライドします。また、タブ付きボックスのいずれかをクリックすると、タブ付きセクションのすべてのdivも非表示になります

誰もが前にこれに出くわしましたか?

4

2 に答える 2

0

JQUERY バインド

ダブルクリックを設定して、バインド解除クリックを配置し、新しいクリックを取得して配置するため、これが起こっているため、これを使用します

$("a.tab").unbind('click focus');
$("a.tab").bind('click focus',function (event) {
        event.preventDefault();
        // switch all tabs off
        $(".active").removeClass("active");

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

        // slide all elements with the class 'content' up
        $(".tab_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();

    });
于 2013-08-07T13:04:22.517 に答える
0

タブをクリックすると、「フォーカス」イベントも自動的にトリガーされます。「フォーカス」を使用して「クリック」イベントを削除するだけです。

2 番目の問題について: 説明が少しわかりにくいですが、アクティブなクラスをすべて削除しているために発生する可能性がありますか? 非表示にしてはならない他の要素でアクティブなクラスを使用している場合は、次のようにセレクターをより具体的にする必要があります。

$("a.tab.active").removeClass("active");
于 2013-08-07T13:04:34.140 に答える