![](/img/trans.png)
[英]CSS and jQuery current links navigation: how to update the <li> class
[英]CSS: How to change css class of li in a navigation
我需要創建一個導航菜單。當我選擇其中一個菜單時,我需要將css類更改為對應的li激活。為此,我使用了如下所示的代碼
<ul class="smallmenuContainer">
<li><a class="active" href="index.html#red">Home</a></li>
<li><a href="index.html#green">About us</a></li>
<li><a href="index.html#blue">Works</a></li>
<li><a href="index.html#yellow">Contact us</a></li>
</ul>
<div class="introContainer">
<a name="red">red</a>
</div>
<div class="aboutContainer">
<a name="green">green</a>
</div>
<div class="galleryContainer">
<a name="blue">blue</a>
</div>
<div class="contactContainer">
</div>
<a name="yellow">yellow</a>
您能幫我更改相應的CSS類嗎?
采用
$(function(){
$('.smallmenuContainer a').click(function(){
$('.smallmenuContainer a').removeClass('active');
$(this).addClass('active');
});
});
它會從所有其他主動刪除類a
標簽,並添加類電流a
您可以像這樣使用jquery的removeClass和AddClass
$('.smallmenuContainer li>a').on('click',function(){
$('.smallmenuContainer li>a').removeClass('active');
$(this).addClass('active');
return false;
});
我不太了解您的意思,但是我認為這可以幫助您:
$('.smallmenuContainer').click(function(
//you should put the class you want to assigne here instead of cssclass
$('#smallmenuContainer li>a').removeClass('cssclass');
$(this).addClass('cssclass');
));
$( ".smallmenuContainer a" ).click(function() {
$( this ).toggleClass( "active" );
});
不要忘記為“活動”類添加CSS。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.