Question

点击菜单,高亮显示方法

本人小白，求大神帮忙，写个菜单点击高亮的方法，菜单代码如下：
<ul class="list-unstyled left-border" id=”nav >
<volist name="foodcatlist" id="sub" offset="0" length=''>

<li > <a href="{:U('List/index/','id='.$sub['fcid'])}" class="list-group-item "><span style="margin-left:60px;">{$sub.fcname}</span><span class="fa fa-caret-right pull-right"></span></a></li>
</volist>
</ul>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
css 样式：

a.list-group-item:hover, a.list-group-item:focus {
background-color: #E53333;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
用js或其他方法也可以，怒钱只能鼠标放上去和右键效果，想要点击菜单栏目高亮，谢谢了

Answer 1

css部分

<style type="text/css">

.menu li{ float:left; list-style:none; text-align:center}

.menu li a{ width:100px; height:30px; line-height:30px; margin-left:10px; float:left; background:#ccc; text-decoration:none;}

.menu li a:link, .menu li a:visited{ background:#ccc;}

.menu li a:hover{ background:#f00;}

.menu li a.anow{ background:#ff0;} 

</style>

    jq代码：

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script language="javascript">

$(document).ready(function(){

 $(".menu a").click(function(){

$(this).toggleClass("anow").parent().siblings().find("a").removeClass("anow"); 

});

});

</script>

html部分

<ul class="menu">

<li><a href="#">111</a></li>

    <li><a href="#">222</a></li>

    <li><a href="#">333</a></li>

</ul>

最终测试如下

初始化

鼠标经过

点击后效果

追问

你的实例是可以的，但是如果加在我的程序里面就不行， 鼠标经过是已经可以了的，但是加点击后效果就无法出来，看下JS要怎么写呢、忘大神指点下

css是这个class="list-group-item "

追答

你不是也是导航不也是li a 、li a循环的吗？？是的话，直接把我写的.menu a替换成.list-group-item就好啦

追问

替换上，点击上没有效果，只有鼠标经过的。2355284622 方便加下Q吗？

追答

你右击查看下源代码，看看html代码是什么黏贴上来看看。。可能是节点没有对应。

追问

黏贴不了那么多，菜单的是这个

追答

没有错啊，我测试都是正确的，你本地有jq插件包吗？？？

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>这个是百度的jq cdn地址，方便你测试我才放网络现有的地址，没有的话，你要去下载下哦

测试代码如下。。。。

测试结果：

Answer 2

查一下原因，实在不行，再问一下高手。

Answer 3

点击的时候，用js给你要的菜单所在的li添加一个背景，设置字体加粗 高亮。 这些你应该要会。纯手打 望采纳，不懂追问我