如何使此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');

另外，在鏈接上使用click事件時，您可能想在事件處理程序的末尾添加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;
})