利用jquery改变指定元素的class样式
<ul>
<li><a href="index.htm" class="shouye">首页</a></li>
<li><a href="/index.htm?actionType=companyIntro">关于博雅</a></li>
<li><a href="/newslist.htm">新闻资讯</a></li>
<li><a href="/chanpin.jsp">产品中心</a></li>
<li><a href="/poslist.htm">经典案例</a></li>
<li><a href="/jiaMenglist.htm">诚邀加盟</a></li>
<li><a href="/index.htm?actionType=lianxi">联系我们</a></li>
</ul>
</div>
我想可以控制点击首页后,首页就有class="shouye"的样式,其它就没有样式了,然后点击关于博雅,这个就有class="shouye"的样式,其它的都没有样式了,就这样的。 展开
jQuery中一般有3个关于改变元素class的函数
addClass、removeClass、toggleClass
addClass
描述: 为每个匹配的元素添加指定的样式类名
$('div').addClass('className');//为所有div添加名为className的classremoveClass
描述: 移除集合中每个匹配元素上一个,多个或全部样式。
$('div').removeClass('className');//将所有div上名为className的class移除toggleClass
描述: 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。
$('div').toggleClass('className');//如果div上有这个class就删除,没有就添加
你好!!
问题1:你的超链接是否可以跳转,也就是说点击首页后,是否直接跳到index.htm中?
如果是这样的话,可能你需要传递一个当前点击项的索引值,然后通过这个索引值,
在跳转的页面中进行 class="shouye" 的设置;
问题2:如果只是点击项,不发生页面的跳转的话,实现起来相对比较容易;
比如:
$(function(){
$("#daohang li").click(function(){
$(this).find("a").addClass("shouye").end().siblings().find("a").removeClass("shouye");
});
});
至于问题1:
其实对于同一个名字的动态页面,前面提到的方式比较方便,可这里是一个链接对应了一个页面,所以可以在不同的页面进行设置就OK了。
之前应该是把问题复杂化了····
$("#daohang > a").click(){
$("#daohang > a").attr("class","");
$(this).attr("class","shouye");
}
<!--
望采纳谢谢!
意思是给点击的超链接添加样式,
方法是先移除之前的样式,然后重新给点击的超链接添加样式.
-->