動態使用jquery更改css類

我想動態更改<li> css類。我正在使用asp.net masterpage。在下面的示例中如果我在點擊加載頁面上的AboutUs.aspx鏈接時想要將<li class="single">更改爲<li class="active single">。動態使用jquery更改css類

如何做到這一點？

<div class="nav-collapse"> 
    <ul class="nav nav-pills"> 
      <li class="active single"><a href="Default.aspx">HOME 
       <i>company home</i> 
        </a> 
      </li> 
      <li class="single"><a href="AboutUs.aspx">About Us 
       <i>want to say</i> 
        </a> 
      </li>

來源

2013-04-02 James123

'$（這）.addClass（ '激活'）;'??? –

爲什麼不讓ASP將該活動類添加到URL？ –

這可能會有所幫助：http://stackoverflow.com/questions/5735171/selecting-active-nav-in-asp-net –

正如@scrappedcola所說，你不必在Javascript中做它，因爲這是完全可以從服務器端代碼。但是，如果您堅持，請按以下步驟操作：

1您必須告訴Javascript您要突出顯示的菜單中的哪個項目。爲每個菜單項創建唯一標識符並告訴服務器端代碼設置它。例如：

<li class="single home"> 
    <a href="Default.aspx">HOME<i>company home</i></a> 
</li> 
<li class="single aboutus"> 
    <a href="AboutUs.aspx">About Us<i>want to say</i></a> 
</li> 
<script> 
    var activeLink = 'aboutus'; 
</script>

2創建並調用JavaScript/jQuery函數來改變的CSS類：

$("." + activeLink).addClass("active");

來源

2013-04-02 14:47:16

這很酷，它的工作。謝謝你。 – James123

像這樣：

$('li.single').click(function(){ 
    $('li').removeClass('active'); 
    $(this).addClass('active'); 
});

這裏有一個例子的jsfiddle - http://jsfiddle.net/HNKeA/1/。

來源

2013-04-02 14:41:13 lifetimes

它正在經歷一個頁面加載，所以這將工作，直到頁面重新加載 – scrappedcola

$('.nav-pills a').click(function(){ 
    $('.nav-pills li').removeClass('active'); 
    $(this).parent().addClass('active') 
})

來源

2013-04-02 14:41:46

$('li.single').click(function(){ 
     $(this).addClass('active'); 

    });

或

$('li.single').click(function(){ 
     $(this).attr('class', 'active single'); 
     });

來源

2013-04-02 14:42:08

$('.nav-collapse > ul > li > a').click(function(){ 
    $('li').removeClass('.active'); 
    $(this).parent().addClass('.active'); 
});

來源

2013-04-02 14:42:36

$("ul li:first").attr('class', 'newClass');

只是相應地改變選擇器。這應該改變每一個什麼嵌套在ul

來源

2013-04-02 14:42:38 MrKekson

動態使用jquery更改css類

回答

相關問題