点击高亮当前，取消同类的效果

weixin_30548917

于 2016-12-13 21:30:00 发布

阅读量288

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hanxuming/p/6171894.html

本文介绍了一种使用JavaScript实现网页中二级导航菜单点击高亮当前选中项的方法。通过为每个菜单项添加点击事件，并利用jQuery进行DOM操作，可以实现在点击不同选项时改变其样式以达到视觉上的高亮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要点击的动作，一般加有交互动作的标签，如a,buttom等（雷哥说的）

二级导航菜单：http://www.cnblogs.com/hanxuming/p/5916504.html

给模版循环出来的li>a加事件（点击高亮当前样式）：

<ul class="fmValUl" id="js-fmValUl">
  <!--{loop $emots $key $value}-->
  <li id="fmValLi_{$key}" class="fmValLi"  data-value="{$key}">
     <a href="javascript:;" onclick="wz_dsu_set_qdxq('{$key}');">{$value['name']}</a>
  </li><!--{/loop}-->
</ul>

<script type="text/javascript">
  function wz_dsu_set_qdxq(key){
     $("#js-fmValUl li").removeClass("fmValLiActive");
     $("#js-fmValUl>li[data-value]").each(function(){
     var k = this.getAttribute("data-value");
     if(k == key){
        $(this).addClass("fmValLiActive");
      }
         });
       }
 </script>