javascript - js 怎么动态添加li的背景颜色,其余同级li的同一个class删除
本文介绍了javascript - js 怎么动态添加li的背景颜色,其余同级li的同一个class删除的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<ul>
<li><a href="#banner"><span class="list-nav"></span></a></li>
<li><a href="#section-one"><span class="list-nav"></span></a></li>
<li><a href="#section-two"><span class="list-nav"></span></a></li>
<li><a href="#section-three"><span class="list-nav"></span></a></li>
</ul>
$('.list-nav').first().addClass("spanList");
$('.list-nav').on('click',function(){
$(this).css("background","#6090b6");
$(this).addClass("spanList");
$(this).siblings().removeClass("spanList");
var href = $(this).attr("href");
var pos = $(href).offset().top;
$("html,body").animate({scrollTop: pos}, 1000);
return false;
})
我想点击的时候将this改颜色,但是其他同级li取消已有的背景颜色。并且当点击其他同级元素时,同级元素获得背景颜色,this的背景颜色取消。
解决方案
根据你的代码反应的思路,你只是想操作span元素,并没有操作li的意图,所以代码这样实现
$('.list-nav').first().addClass("spanList");
$('.list-nav').on('click',function(){
$(this).css("background","#6090b6");
$(this).addClass("spanList");
/** 以下这段实现你说的功能 **/
var $otherSpans = $(this).closest('li').siblings().find('span.list-nav');
$otherSpans.css("background", "");
$otherSpans.removeClass("spanList");
/** 以上这段实现你说的功能 **/
var href = $(this).attr("href");
var pos = $(href).offset().top;
$("html,body").animate({scrollTop: pos}, 1000);
return false;
})
这篇关于javascript - js 怎么动态添加li的背景颜色,其余同级li的同一个class删除的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文