javascript - 更改用于修改 div 显示/隐藏的链接的背景颜色

Question

我有一个导航列表：

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>

单击 Home 或 Contact 时，会隐藏或显示相应的 div。

<script>

$("#tabs a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr('href');
    $(toShow).show();
});

</script>

<div id="home" class="toggle" style="display:none"> This is the Home page.</div>

问题

如何在导航列表中显示对应的div时使单词的背景不同？

例如，当显示 div“home”时，导航中的“Home”一词具有蓝色背景。

Answer 1

您需要将背景颜色添加到单击的元素，但您还需要确保从最后单击的元素中删除它。

$("#tabs a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr('href');
    // Remove the class from any siblings if it exists
    $("#tabs a").removeClass('yourClass');
    // Add the class to the clicked #tab a
    $(this).addClass('yourClass');
    $(toShow).show();
});

然后在你的 CSS 文件中创建一个类（例如，'yourClass'），它赋予背景颜色和/或任何你想编辑的东西。

.yourClass {
    background: #e2e2e2;
}

Answer 2

   <script>

    $("#tabs a").click(function(e){
        e.preventDefault();
        $(#tabs a).removeClass('yourClass');
        $(this).addClass('active');
        $(".toggle").hide();
        var toShow = $(this).attr('href');
        $(toShow).show();
    });

    </script>

css

.active
{
background-color:blue;
}

希望这可以帮助！！

Answer 3

一个例子：

$('ul a').click(function() {
    $(this).closest('ul').find('a').css('background-color', '');

    $(this).css('background-color', 'red')
    return false;
});​

一个演示