时间戳

首页 > 解决方案 > 如何使用 JQuery 在导航栏中更改列表项/元素的背景颜色？

jquery - 如何使用 JQuery 在导航栏中更改列表项/元素的背景颜色？

问题描述

我只是在学习 JQuery，为了测试我自己，我正在创建一个简单的网页，它有一个由列表元素、页眉和页脚组成的导航栏。每当我单击任何项​​目时，我都想更改导航栏列表元素的背景颜色。

我尝试使用$(id-name)选择器和 .click() 方法来更改背景颜色，但它只是更改文本的背景颜色，而不是包含填充、宽度/高度和边框等的整个元素。

这是我的 HTML 代码：

<div id="nav">
    <ul>
        <li id="t1" ><a style="background-color: #505152;" href="#">ELEMENT 1</a></li>
        <li id="t2"><a href="#">ELEMENT 2</a></li>
        <li id="t3"><a href="#">ELEMENT 3</a></li>
        <li id="t4"><a href="#">ELEMENT 4</a></li>
    </ul>
</div>

<div id="body">
    <div id="text1" class="allText">This is Text 1</div>

    <div id="text2" class="allText" style="display: none;" >This is text 2</div>

    <div id="text3" class="allText"  style="display: none;">This is text 3</div>

    <div id="text4" class="allText"  style="display: none;">This is text 4</div>
</div>

这是我的 CSS 代码：

body{
    font-family: Helvetica;
    margin: 0;
    padding: 0;
}

#body{
    background-color: #fcfcfc;
    width: 75%;
    float: left;;
    height: 450;
}

#nav{
    background-color: #e1e4e6;
    width: 25%;
    float: left;
    height: 440px;
}

ul{
    list-style: none;
}

ul li a{
    text-decoration: none;
    padding: 20px;
    color: white;
    background-color: black;
    margin-bottom: 100px;
    font-style: italic;
}

ul li{
    margin-top: 40px;
}

这是我的 jQuery 代码：

$(document).ready(function(){
    $("#text1").css("background-color", "#38ceff");

    console.log("enter in script");

    $("#t1").click(function(){
        $("li").eq(0).css("background-color", "#505152");
        $("li").eq(1).css("background-color", "black");
        $("li").eq(2).css("background-color", "black");
        $("li").eq(3).css("background-color", "black");

        $("#text1").show();
        $("#text2").hide();
        $("#text3").hide();
        $("#text4").hide();
    });

    $("#t2").click(function(){
        $("li").eq(0).css("background-color", "black");
        $("li").eq(1).css("background-color", "#505152");
        $("li").eq(2).css("background-color", "black");
        $("li").eq(3).css("background-color", "black");

        $("#text1").hide();
        $("#text2").show();
        $("#text3").hide();
        $("#text4").hide();
    });

    $("#t3").click(function(){
        $("li").eq(0).css("background-color", "black");
        $("li").eq(1).css("background-color", "black");
        $("li").eq(2).css("background-color", "#505152");
        $("li").eq(3).css("background-color", "black");

        $("#text1").hide();
        $("#text2").hide();
        $("#text3").show();
        $("#text4").hide();
    });

    $("#t4").click(function(){
        $("li").eq(0).css("background-color", "black");
        $("li").eq(1).css("background-color", "black");
        $("li").eq(2).css("background-color", "black");
        $("li").eq(3).css("background-color", "#505152");

        $("#text1").hide();
        $("#text2").hide();
        $("#text3").hide();
        $("#text4").show();
    });
});

任何帮助将不胜感激。

标签： jquerycss

解决方案

$(function(){
    $("#text1").css("background-color", "#38ceff");

    console.log("enter in script");

    $("#t1").click(function(){
        $("li a").eq(0).css("background-color", "#505152");
		$("li a").eq(1).css("background-color", "black");
        $("li a").eq(2).css("background-color", "black");
        $("li a").eq(3).css("background-color", "black");

        $("#text1").show();
        $("#text2").hide();
        $("#text3").hide();
        $("#text4").hide();
    });

    $("#t2").click(function(){
        $("li a").eq(0).css("background-color", "black");
        $("li a").eq(1).css("background-color", "#505152");
        $("li a").eq(2).css("background-color", "black");
        $("li a").eq(3).css("background-color", "black");

        $("#text1").hide();
        $("#text2").show();
        $("#text3").hide();
        $("#text4").hide();
    });

    $("#t3").click(function(){
        $("li a").eq(0).css("background-color", "black");
        $("li a").eq(1).css("background-color", "black");
        $("li a").eq(2).css("background-color", "#505152");
        $("li a").eq(3).css("background-color", "black");

        $("#text1").hide();
        $("#text2").hide();
        $("#text3").show();
        $("#text4").hide();
    });

    $("#t4").click(function(){
        $("li a").eq(0).css("background-color", "black");
        $("li a").eq(1).css("background-color", "black");
        $("li a").eq(2).css("background-color", "black");
        $("li a").eq(3).css("background-color", "#505152");

        $("#text1").hide();
        $("#text2").hide();
        $("#text3").hide();
        $("#text4").show();
    });
});
body{
    font-family: Helvetica;
    margin: 0;
    padding: 0;
}

#body{
    background-color: #fcfcfc;
    width: 75%;
    float: left;;
    height: 450;
}

#nav{
    background-color: #e1e4e6;
    width: 25%;
    float: left;
    height: 440px;
}

ul{
    list-style: none;
}

ul li a{
    text-decoration: none;
    padding: 20px;
    color: white;
    background-color: black;
    margin-bottom: 100px;
    font-style: italic;
}

ul li{
    margin-top: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
    <ul>
        <li id="t1" ><a style="background-color: #505152;" href="#">ELEMENT 1</a></li>
        <li id="t2"><a href="#">ELEMENT 2</a></li>
        <li id="t3"><a href="#">ELEMENT 3</a></li>
        <li id="t4"><a href="#">ELEMENT 4</a></li>
    </ul>
</div>

<div id="body">
    <div id="text1" class="allText">This is Text 1</div>

    <div id="text2" class="allText" style="display: none;" >This is text 2</div>

    <div id="text3" class="allText"  style="display: none;">This is text 3</div>

    <div id="text4" class="allText"  style="display: none;">This is text 4</div>
</div>

这是你的 javascript

 $("#text1").css("background-color", "#38ceff");

console.log("enter in script");

$("#t1").click(function(){
    $("li a").eq(0).css("background-color", "#505152");
    $("li a").eq(1).css("background-color", "black");
    $("li a").eq(2).css("background-color", "black");
    $("li a").eq(3).css("background-color", "black");

    $("#text1").show();
    $("#text2").hide();
    $("#text3").hide();
    $("#text4").hide();
});

$("#t2").click(function(){
    $("li a").eq(0).css("background-color", "black");
    $("li a").eq(1).css("background-color", "#505152");
    $("li a").eq(2).css("background-color", "black");
    $("li a").eq(3).css("background-color", "black");

    $("#text1").hide();
    $("#text2").show();
    $("#text3").hide();
    $("#text4").hide();
});

$("#t3").click(function(){
    $("li a").eq(0).css("background-color", "black");
    $("li a").eq(1).css("background-color", "black");
    $("li a").eq(2).css("background-color", "#505152");
    $("li a").eq(3).css("background-color", "black");

    $("#text1").hide();
    $("#text2").hide();
    $("#text3").show();
    $("#text4").hide();
});

$("#t4").click(function(){
    $("li a").eq(0).css("background-color", "black");
    $("li a").eq(1).css("background-color", "black");
    $("li a").eq(2).css("background-color", "black");
    $("li a").eq(3).css("background-color", "#505152");

    $("#text1").hide();
    $("#text2").hide();
    $("#text3").hide();
    $("#text4").show();
});

});

推荐阅读