單擊li標簽時無法將css添加到li元素

Question

這是HTML部分 -

 <div id="sidebar" role="navigation">

                    <ul class="nav nav-sidebar">
                        <li class="active"><a href="#">My Orders</a></li>
                        <li><a href="#">My Store</a></li>
                        <li><a href="#">My Profile</a></li>
                        <li><a href="#">My Account</a></li>
                        <li><a href="#">Settings</a></li>

                    </ul>

                </div>

CSS：

/* Sidebar navigation */
    .nav-sidebar {
        background-color: #f5f5f5;
        margin-right: -15px;
        margin-bottom: 20px;
        margin-left: -15px;
    }
    .nav-sidebar > li > a {
        padding-right: 20px;
        padding-left: 20px;
    }
    .nav-sidebar > .active > a {
        color: #fff;
        background-color: #c52d2f;
    }

JS代碼：

 $(document).ready(function() {

    $('#sidebar').on('click', 'li' function(){
        $(this).closest('ul').find('.active').removeClass();
        $(this).addClass('active');

    });
});

查看演示http://jsfiddle.net/tu4tsa4n/1/每當我點擊li標簽時，所有其他標簽都應刪除“有效”標簽，點擊的“li”標簽應變為“紅色”或激活。 目前，當您點擊標簽時，它會突出顯示而不是紅色。 如何實現所需的功能？

Answer 1

你的小提琴有3個問題：

1. 有一個語法錯誤，遺漏,選擇和處理器之間。

    $('#sidebar').on('click', 'li' function() { // ---^ 

2. 你還沒有加載jQuery。 您可以從左側面板加載它。

3. 添加類時，bootstrap :focus選擇器會覆蓋您的選擇器：

    .nav>li>a:hover, .nav>li>a:focus { text-decoration: none; background-color: #eee; } 

   您應該使用更具體的選擇器。 像.nav > li.active > a 。

http://jsfiddle.net/u2tzrpf2/

Answer 2

你應該使用它，忘了在JSFidlle上添加JQuery：

 $(document).ready(function() {
    $('#sidebar .nav li').on('click', function(){
        $(this).closest('ul').find('.active').removeClass();
        $(this).addClass('active');

    });
});

http://jsfiddle.net/qs337y9e/1/

編輯：我也將css改為： .nav.nav-sidebar > li.active > a @Vohuman建議

Answer 3

如果有<a> ，為什么不使用它，它是專為點擊，

你這樣做更容易：

 $(document).ready(function() { $('#sidebar li a').on('click', function() { $('#sidebar li a').parent().removeClass('active'); $(this).parent().addClass('active'); }); }); 

 .nav-sidebar { background-color: #f5f5f5; margin-right: -15px; margin-bottom: 20px; margin-left: -15px; } .nav-sidebar a { padding-right: 20px; padding-left: 20px; } .nav-sidebar .active a { color: #fff; background-color: #c52d2f; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="sidebar" role="navigation"> <ul class="nav nav-sidebar"> <li class="active"><a href="#">My Orders</a></li> <li><a href="#">My Store</a></li> <li><a href="#">My Profile</a></li> <li><a href="#">My Account</a></li> <li><a href="#">Settings</a></li> </ul> </div> 

Answer 4

1）我認為你可以簡化選擇器

    $('#sidebar li').on('click', function(){
        $(this).siblings().removeClass("active"); //better than 'find'
        $(this).addClass('active');            
    });

2）@ Vohuman提到的焦點是你的'真正'問題，修復：

    .nav-sidebar > .active, .nav-sidebar > .active :focus  {
        color: #fff;
        background-color: #c52d2f;
    }

http://jsfiddle.net/f9ccqq7L/

Answer 5

你忘記了這行中的逗號

$('#sidebar').on('click', 'li' function(){

它應該是

$('#sidebar').on('click', 'li', function(){

您忘記在此行中指定要刪除的班級

$(this).closest('ul').find('.active').removeClass();

這是更正：

$(this).closest('ul').find('.active').removeClass("active");

然后你必須添加一點css因為boostrap。

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:focus{
    color: #fff;
    background-color: #c52d2f;
}