Question

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

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

我希望div 1分配一个不同的类（这可以不用CSS吗？）并且当你选择一个从非活动到活动时，有两个类切换。

如何在jQuery中完成？

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;
})

如何使这个slideDown / slideUp适用于不同的类？

1 个答案: