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时，如何使导航列表中单词的背景不同？

E.g。显示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;
});

A DEMO

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

3 个答案: