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 在单击时触发两次，并且框向下滑动两次，当单击任何一个选项卡式框时，它也会隐藏选项卡式部分上的所有 div

有人遇到过这个吗？

4

2 回答 2

0

查询绑定

使用这种情况发生这种情况，因为您是通过设置双击并取消绑定单击并进行新的单击

$("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

单击选项卡时，也会自动触发“焦点”事件。只需使用“焦点”并删除“点击”事件。

关于您的第二个问题：您的解释有点难以理解，但这可能是因为您正在删除所有活动课程吗？如果您在其他不应隐藏的元素上使用活动类，则应在选择器中更具体，例如：

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