javascript - js 怎麼動態加入li的背景顏色,其餘同等級li的同一個class刪除
天蓬老师
天蓬老师 2017-05-19 10:38:06
0
2
616
<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的背景顏色取消。

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回覆(2)
左手右手慢动作

根據你的程式碼反應的思路,你只是想操作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梦

…$this.addClass("").closest("li").siblings("li").find("").removeAttr("")

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!