ul li 点击事件切换颜色

qumoy 2017-07-07 11:25:25

我想点击不同的li，然后被点击的li显示不同的颜色，如上图，感觉道理上都对的，不知道问题出在哪里，颜色还是不能切换。请教一下。。
...全文
6898 20 打赏 收藏 转发到动态 举报
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
苹果加糖 2018-09-04
  • 打赏
  • 举报
 回复 


<style>

.active2{

background-color: green!important;

color: #FFFFFF!important;

}

</style>

<header>

    <div class="container">

    <div class="row">

        <div class="navigation">

            <ul>

               

                <li class="active2">

                    <a href="#" onclick="window.location.href='${request.contextPath }/website/infoHomess/serviceHome'">

                        服务管理

                    </a>

                </li>

                <li>

                    <a href="#" onclick="window.location.href='${request.contextPath }/website/infoHome/findJob'">

                        就业信息

                    </a>

                </li>

                <li>

                    <a href="#" onclick="window.location.href='${request.contextPath }/website/infoHomes/skillInterview'">

                        求职技能

                    </a>

                </li>

                

            </ul>

        </div>

    </div>

    </div>

</header>

<script>

$(".navigation ul li").on({

click:function(){

$(".navigation ul li").removeClass("active2");

$(this).addClass("active2");

}

});



</script>

我有一个和你类似的问题，点击切换时，点击的那一个背景颜色闪一下，又回到默认选中的class的样式，你能帮我看一下吗？谢谢啦！
苹果加糖 2018-09-04
  • 打赏
  • 举报
 回复

效果就是“点击就业信息，背景闪一下，又回到服务管理的这个效果”
苹果加糖 2018-09-04
  • 打赏
  • 举报
 回复



<style>
.active2{
background-color: green!important;
color: #FFFFFF!important;
}
</style>
<header>
<div class="container">
<div class="row">
<div class="navigation">
<ul>

<li class="active2">
<a href="#" onclick="window.location.href='${request.contextPath }/website/infoHomess/serviceHome'">
服务管理
</a>
</li>
<li>
<a href="#" onclick="window.location.href='${request.contextPath }/website/infoHome/findJob'">
就业信息
</a>
</li>
<li>
<a href="#" onclick="window.location.href='${request.contextPath }/website/infoHomes/skillInterview'">
求职技能
</a>
</li>

</ul>
</div>
</div>
</div>
</header>
<script>
$(".navigation ul li").on({
click:function(){
$(".navigation ul li").removeClass("active2");
$(this).addClass("active2");
}
});

</script>

我有一个和你类似的问题，点击切换时，点击的那一个背景颜色闪一下，又回到默认选中的class的样式，你能帮我看一下吗？谢谢啦！
qumoy 2017-07-14
  • 打赏
  • 举报
 回复
引用 16 楼 MOONCOM 的回复:
你把你的代码给我吧，我给你调出来，这样一段一段的看，我得需要多高的联想力才能给你解决问题啊。 记得，要代码，别贴图片
解决了，js代码没问题，jsp的引入问题，谢谢了
霜月枫桥 2017-07-13
  • 打赏
  • 举报
 回复
你把你的代码给我吧，我给你调出来，这样一段一段的看，我得需要多高的联想力才能给你解决问题啊。 记得，要代码，别贴图片
qumoy 2017-07-13
  • 打赏
  • 举报
 回复
引用 14 楼 MOONCOM 的回复:
[quote=引用 12 楼 qumoy 的回复:]
[quote=引用 7 楼 MOONCOM 的回复:]
写错了，用下面这个
$("ul").on("click","li",function(){

    $("ul li").removeClass("nav-active");

    $(this).addClass("nav-active");

});

你的这个跟我的意思是一个意思啊，试了还是标签还是无法随点击切换颜色。[/quote]
分三种情况，一是你点击某个li元素，但是其class并没有nav-active属性值，说明JS代码写错了
二是选中的li有属性值nav-active，但是颜色没变。说明.nav-active背景色的优先级不高，
三是你li的背景色正常显示了，但是你已经为a设了背景色，li的背景色被a给覆盖了。
上面是我能想到的三种情况，你挨个查一下吧。[/quote]
我感觉是优先级的问题，这个是我的css代码
霜月枫桥 2017-07-13
  • 打赏
  • 举报
 回复
引用 12 楼 qumoy 的回复:
[quote=引用 7 楼 MOONCOM 的回复:] 写错了，用下面这个 
$("ul").on("click","li",function(){
    $("ul li").removeClass("nav-active");
    $(this).addClass("nav-active");
});
你的这个跟我的意思是一个意思啊，试了还是标签还是无法随点击切换颜色。[/quote] 分三种情况，一是你点击某个li元素，但是其class并没有nav-active属性值，说明JS代码写错了 二是选中的li有属性值nav-active，但是颜色没变。说明.nav-active背景色的优先级不高， 三是你li的背景色正常显示了，但是你已经为a设了背景色，li的背景色被a给覆盖了。 上面是我能想到的三种情况，你挨个查一下吧。
qumoy 2017-07-13
  • 打赏
  • 举报
 回复
引用 9 楼 gy127132060 的回复:
MD,,,手误了，，，上边的this不要加引号




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

  $("ul li['class']").removeClass("nav-active");

  $(this).addClass("class","nav-active");

})
这样

在class方括号这会报错
qumoy 2017-07-13
  • 打赏
  • 举报
 回复
引用 7 楼 MOONCOM 的回复:
写错了，用下面这个 
$("ul").on("click","li",function(){
    $("ul li").removeClass("nav-active");
    $(this).addClass("nav-active");
});
你的这个跟我的意思是一个意思啊，试了还是标签还是无法随点击切换颜色。
tanshile7662 2017-07-11
  • 打赏
  • 举报
 回复
JQuery，需要学习！！！！
沐沐坏小孩 2017-07-10
  • 打赏
  • 举报
 回复
6楼正解
qumoy 2017-07-07
  • 打赏
  • 举报
 回复
引用 3 楼 yanluofeihong 的回复:
[quote=引用 2 楼 qumoy 的回复:] [quote=引用 1 楼 yanluofeihong 的回复:] 

$("ul").on("click","li",function(){
    $("li").addClass("nav-active").siblings().removeClass("nav-active");
})
写成这样你在看看还有问题吗？
还是没有用，不能随点击切换颜色[/quote]因为里面还有一个a标签，换的是a标签的颜色，你改一下吧[/quote] 看我第一个<li>标签，静态加了这个class，就可以显示啊。
看着是个昵称 2017-07-07
  • 打赏
  • 举报
 回复
引用 2 楼 qumoy 的回复:
[quote=引用 1 楼 yanluofeihong 的回复:] 

$("ul").on("click","li",function(){
    $("li").addClass("nav-active").siblings().removeClass("nav-active");
})
写成这样你在看看还有问题吗？
还是没有用，不能随点击切换颜色[/quote]因为里面还有一个a标签，换的是a标签的颜色，你改一下吧
qumoy 2017-07-07
  • 打赏
  • 举报
 回复
引用 1 楼 yanluofeihong 的回复:

$("ul").on("click","li",function(){
    $("li").addClass("nav-active").siblings().removeClass("nav-active");
})
写成这样你在看看还有问题吗？
还是没有用，不能随点击切换颜色
看着是个昵称 2017-07-07
  • 打赏
  • 举报
 回复 

$("ul").on("click","li",function(){
    $("li").addClass("nav-active").siblings().removeClass("nav-active");
})
写成这样你在看看还有问题吗？
香蕉猪 2017-07-07
  • 打赏
  • 举报
 回复
MD,,,手误了，，，上边的this不要加引号 

$("ul li").on('click',function(){
  $("ul li['class']").removeClass("nav-active");
  $(this).addClass("class","nav-active");
})
这样
香蕉猪 2017-07-07
  • 打赏
  • 举报
 回复 

$("ul li").on('click',function(){
  $("ul li['class']").removeClass("nav-active");
  $("this").addClass("class","nav-active");
})
这样用
霜月枫桥 2017-07-07
  • 打赏
  • 举报
 回复
写错了，用下面这个 
$("ul").on("click","li",function(){
    $("ul li").removeClass("nav-active");
    $(this).addClass("nav-active");
});
霜月枫桥 2017-07-07
  • 打赏
  • 举报
 回复
这是我写的示例： 
    <ul>
        <li>点击</li>
        <li>点击</li>
        <li>点击</li>
        <li>点击</li>
        <li>点击</li>
    </ul>
    <style>
    .add{
        background-color:green;
    }
    </style>
    <script>
    $("ul").on("click","li",function(){
        $("ul li").removeClass("add");
        $(this).addClass("add");
    });
    </script>
这是我给你改的代码： 
$("ul").on("click","li",function(){
    $("ul li").removeClass("add");
    $(this).addClass("nav-active");
});
看着是个昵称 2017-07-07
  • 打赏
  • 举报
 回复
引用 4 楼 qumoy 的回复:
[quote=引用 3 楼 yanluofeihong 的回复:] [quote=引用 2 楼 qumoy 的回复:] [quote=引用 1 楼 yanluofeihong 的回复:] 

$("ul").on("click","li",function(){
    $("li").addClass("nav-active").siblings().removeClass("nav-active");
})
写成这样你在看看还有问题吗？
还是没有用，不能随点击切换颜色[/quote]因为里面还有一个a标签，换的是a标签的颜色，你改一下吧[/quote] 看我第一个<li>标签，静态加了这个class，就可以显示啊。[/quote] 我是不知道你是怎么实现的，我试了，根本不会变颜色， $("body").on("click","li",function(){ $(this).find("a").addClass("nav-active").parents("li").siblings().find("a").removeClass("nav-active"); })这样写，这是我测试之后的效果
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
主要介绍了vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
轻松实现js选项卡切换效果
这是要实现的效果图： 一.HTML页面布局 <!-- HTML页面布局 --> 房产 家居 二手房 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90
HTML从入门到精通
HTML是网页制作最基础的编程语言，本课程主要介绍html语言，以及html标签、html文件结构、head标签,还有在html中的注释代码的作用。除此之外课程还回讲解HTML中的常见标签，如div，p，a，span，ul，li，table，form，iframe等。课程重点：表单标签。表单是网页中重要的元素之一，是网页与服务器进行数据交换的主要标签。
利用Vue的v-for和v-bind实现列表颜色切换
需求： 在页面上显示四个列表，初始时字体为黑色。 鼠标点击某一个列表时，该列表的颜色变为红色，其余列表仍为黑色。 代码实现： <!-- css --> <style> .red{ color: red; } </style> <!-- html -->
<ul> <li v-for=item,index class={red: xss=removed v-on:click=change(index)>{{item}}li> ul>
<!-- JavaScript --> <scr
jq悬浮实例.html
详细注释，鼠标悬浮到标签是会改变标签颜色，鼠标离开时会取消样式hqul.style.background = "red"; //悬浮时设置当前浮动的标签为红色 for(i = 0;iulsl.length;i++){ //循环ul的长度 if(hqul == hqulsl[i]) { //判断ep的子元素是否和当前一样 if(i!=a){ //判断i是否等于a a为上一个悬浮的元素 console.log(i); $("li").eq(a).css({"background":"cyan"}) //获取全部li元素的第a个，改变样式 a = i; //a为上一个悬浮的元素 } } } } document.getElementById("ul").onmouseout = function(wq){ //脱离悬浮后的函数 hqul.style.background = "cyan"; //改变样式 }
CSS

61,111

社区成员

60,732

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章