Question

基本上我有一个设置菜单，包含3个选项和3个div，默认情况下隐藏2个。整个过程在第一次单击时工作正常，它隐藏正确的div并显示正确的div，同时从当前链接中删除活动类并将其添加到单击的那个。但是，当我再次尝试单击其他链接时，它会向下滑动正确的div，但它不会向上滑动另一个打开的div。我被卡住了。

代码：

HTML：

<ul class="nav nav-pills">
        <li class="settingLink active" data-tab="general"><a href="#">General</a></li>
        <li class="settingLink" data-tab="social" ><a href="#">Social</a></li>
        <li class="settingLink" data-tab="captcha"><a href="#">Captcha</a></li>
    </ul>

div：

<div id="generalSettings">
</div>
<div id="socialSettings">
</div>
<div id="captchaSettings">
</div>

JS：

function settingMenu(event)
{
$('.settingLink').bind('click', function(){
    //The tab value of the currently clicked element
    var tab = $(this).data('tab');
    //Current active element
    var current = $('.active, .settingLink').data('tab');

    //Slide the old div up
    $('#'+current+'Settings').slideUp('fast', function(){
        //Slide the new div down
        $('#'+tab+'Settings').slideDown();
    });

    //Remove active class from current link
    $('.active, .settingLink').removeClass('active');
    //Add active class to new link
    $(this).addClass('active');

});
}

提前谢谢！

Answer 1

没有逗号而不是这个

$('.active, .settingLink')

试试这个

$('.active.settingLink')

选择

Answer 2

这行如果我没有弄错..看起来你想将currentCliked存储在当前右边。如果它有两个类，那么你的选择器是错误的......

var current = $('.active, .settingLink').data('tab');

应该是

var current = $('.active.settingLink').data('tab');

Check FIDDLE

分配事件处理程序而不是调用函数也是一种更好的做法，因为如果多次调用函数，事件处理程序可能会重复。将事件附加到锚点而不是li

使用jQuery隐藏和显示div

2 个答案: