<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的背景顏色取消。
ringa_lee2017-05-19 10:40:06
根據你的程式碼反應的思路,你只是想操作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;
})
在線 Demo
过去多啦不再A梦2017-05-19 10:40:06
…$this.addClass("").closest("li").siblings("li").find("").removeAttr("")