Javascript:控制Li选中项样式

  一、效果图样式:

《Javascript:控制Li选中项样式》

二、HTML内容:

<ul id=”style”> <li class=”filterName”><strong>选择类型AAA:</strong></li> <li><a><span>全部 </span></a></li> <li><a id=”0″><span>选项AAAAA</span></a></li> <li><a><span>选项BBBBB</span></a></li> </ul> <ul id=””> <li class=”filterName”><strong>选择类型BBB:</strong></li> <li><a><span>全部</span></a></li> <li><a><span>选项AAAAA</span></a></li> <li><a><span>选项BBBBB</span></a></li> </ul> <ul id=””> <li class=”filterName”><strong>选择类型CCC:</strong></li> <li><a><span>全部</span></a></li> <li><a><span>选项AAAAA</span></a></li> <li><a><span>选项BBBBB</span></a></li> <li><a><span>选项CCCCC</span></a></li> </ul>

三、用到的javascript方法:

1.引入jQuery库

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script> <script type=”text/javascript”>

2.样式控制方法:

  function setParmsValue(parm, parmsValue) { } $(function(){ var spans= $(“li > a > span”).click(function(){ $(this).addClass(“selected”); $(this).parent().parent().siblings().children().children().removeClass(“selected”); }); });

四、选中项的样式:

.selected { background-color:#F00; }

    原文作者:清山博客
    原文地址: http://www.cnblogs.com/zhangqs008/archive/2011/02/25/2341144.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞