利用jquery来切换导航菜单的css样式:
<ul class="menu"> <li class="menu-item current-menu-item "> <a href="http://www.xiaoshu168.com">首页</a> </li> <li class="menu-item "> <a href="http://www.xiaoshu168.com/php">PHP</a> </li> <li class="menu-item "> <a href="http://www.xiaoshu168.com/linux">LINUX</a> </li> <li class="menu-item "> <a href="http://www.xiaoshu168.com/jquery">JQUERY</a> </li> <li class="menu-item "> <a href="http://www.xiaoshu168.com/html">HTML</a> </li> <li class="menu-item "> <a href="http://www.xiaoshu168.com/wxapplet">微信小程序</a> </li> <li class="menu-item "> <a href="http://www.xiaoshu168.com/tag/laravel-packages">Laravel5 扩展包</a> </li> <li class="menu-item right "> <a target="_blank" href="http://www.xiaoshu168.com/sitemaps">地图</a> </li> <li class="menu-item right "> <a target="_blank" href="http://www.xiaoshu168.com/tags/list">标签</a> </li> </ul>
如果选择了就给li添加current-menu-item
样式
$(".menu").find('li').click(function(){ $(this).siblings().removeClass('current-menu-item'); $(this).addClass('current-menu-item'); });