javascript - 如何使此 slideDown/slideUp 与不同的类一起正常工作？

Question

我正在尝试学习 jQuery，但我似乎无法弄清楚以下内容。

当页面加载时，div 1 应该是可见的。
当我单击菜单按钮时，div 1 应该隐藏，单击的 div 应该替换它。

我希望 div 1 有一个不同的类分配给它(这可以在没有 CSS 的情况下完成吗？)并且当您选择一个从非事件到事件时切换这 2 个类。

这在 jQuery 中如何实现？

https://jsfiddle.net/3kvfy4oa/

HTML

<div id='container'>
<div id='menu'>
    <ul id='List'>
        <li><a href="#content1">Menu 1</a></li>
        <li><a href="#content2">Menu 2</a></li>
        <li><a href="#content3">Menu 3</a></li>
    </ul>
</div>

<div id='content'>
    <div id=content1 class="">
    <h1>Div 1</h1>
    Lorem ipsum dolor sit amet
    </div>
    <div id=content2 class="disactivated">
    <h1>Div 2 </h1>
    Lorem ipsum dolor sit amet
    </div>
    <div id=content3 class="disactivated">
    <h1>Div 3</h1>
    Lorem ipsum dolor sit amet
    </div>
</div>

CSS

div#menu{
    width:150px;
    left:-180px;
    position: absolute;
    z-index: 100;
}
div#menu ul li{
    margin-bottom: 1px;   
    position: relative;
    float : left; 
}
div#menu ul#List li a{
    width: 150px;
    height: 22px;
    background-color: #00293E;
    /*color: #ffffff;*/
    text-decoration: none;
    display: block;
    padding: 7px 10px 0 0;
    text-align: right;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
}

#content{
    left:50px;
    position: absolute;
    width:500px;
}
.disactivated{
    display: none;
}

jQuery

$(document).ready(function(){
    $('a').on('click',function(){
        $(this)
          .slideDown('fast')
          .siblings("div:visible").slideUp('fast')
    })
});

Answer 1

在您的 jQuery 代码中，$(this) 指的是 a 元素(您点击的元素)，而不是您的目标 div。

$('a').on('click',function(){
    var target = $(this).attr('href');

    $(target)
        .slideDown('fast')
        .siblings("div:visible").slideUp('fast');
})

如果你想切换 disactivated 类，像这样链接它:

    $(target)
        .removeClass('disactivated')
        .slideDown('fast')
        .siblings("div:visible")
            .slideUp('fast')
            .addClass('disactivated');

此外，在链接上使用点击事件时，您可能希望将 return false 添加到事件处理程序的末尾。最终代码应如下所示:

$('a').on('click',function(){
    var target = $(this).attr('href');

    $(target)
        .removeClass('disactivated')
        .slideDown('fast')
        .siblings("div:visible")
            .slideUp('fast')
            .addClass('disactivated');

    return false;
})