Question

我的页面顶部有几个隐藏的DIV，应该用菜单切换。因此我使用code from random snippets这非常简单：

使用Javascript：

function toggleDiv(divId) {
    $("#"+divId).slideToggle();
}

HTML：

<ul>
    <li><a href="javascript:toggleDiv('projekte');">Projekte</a></li>
    <li><a href="javascript:toggleDiv('mo');">Mo</a></li>
    ...
</ul>

现在我想将类.active添加到DIV可见的链接。我不确定如何选择该链接，任何人都可以帮忙吗？

除此之外，关闭另一个/所有其他切换的DIV会很好，如果有一个可见的话。

谢谢！

Answer 1

的Javascript

$('ul li a').on('click', function(e) {

    // to keep your link from actually clicking through
    e.preventDefault();

    $(this).addClass('active');
    $( '#' + $(this).attr('href') ).slideToggle();

});

HTML

<ul>
    <li><a href="projekte">Projekte</a></li>
    <li><a href="mo">Mo</a></li>
</ul>

Answer 2

如果没有启用Javascript，我会修改代码以便更容易访问

<强>的Javascript

$('ul').find('a').on('click', function() {
    var $this = $(this); // cache $(this)

    $this.addClass('active');
    $( $this.attr('href') ).slideToggle();

    return false; // prevent anchor click event
});

<强> HTML

<ul>
    <li><a href="#projekte">Projekte</a></li>
    <li><a href="#mo">Mo</a></li>
</ul>

<div id="projekte">Stuff</div>
<div id="mo">Stuff</div>

将.active类添加到jQuery slideToggle菜单

2 个答案: