無法CSS添加到li元素上點擊L1標籤

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標籤時，所有其他標籤都應該刪除'active'標籤和clicke d'li'標籤應該變爲'紅色'或激活。目前，當您點擊標籤時，它會變爲高亮顯示而不是紅色。 如何實現所需的功能？

Answer 1

你應該使用這個，忘了添加JQuery的對JSFidlle：

$(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 2

你的小提琴有三個問題：

1. 存在語法錯誤，在選擇器和處理程序之間缺少,。

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

2. 您尚未加載jQuery。您可以從左側面板加載它。

3. 在添加類，引導:focus選擇覆蓋您的選擇：

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

   你應該使用更具體的選擇。類似於.nav > li.active > a。

http://jsfiddle.net/u2tzrpf2/

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。

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