发现jquery真是个难得的好库啊，前段时间仿模版时需要一个高亮导航的效果，却意外地找到了一个通用的方法，而且很简便，方法如下：
在模板的head区域添加jquery和css文件的调用代码，此处方法有两种：
一、直接引用：http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
|
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>? |
二、个人比较喜欢这种
|
1 2 3 4 |
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.4.2"); //将1.4.2改为你需要的版本号 </script> |
感觉这个比较直观
准备不走已经好了，下面是效果的实现代码
在需要此效果的地方添加如下代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
? <script type="text/javascript"> ? $(function(){ ????????? $(".menu_1").attr("id","menu_selected");//menu_1为需要效果指定的识别参数，即class值为menu_1则将id值修改为menu_selected，此处也可自行修改为别的，如多处使用此效果，记得不要重复参数 ? }) ? </script> ????? <ul> ????? <li><a href="<a href="http://cn.hualidianlan.com/">http://cn.hualidianlan.com/</a>" title="公司主页"><span>公司主页</span></a></li> ????? <li><a href="<a href="http://cn.hualidianlan.com/About/">http://cn.hualidianlan.com/About/</a>"><span>关于我们</span></a></li> ????? <li><a href="<a href="http://cn.hualidianlan.com/Service/">http://cn.hualidianlan.com/Service/</a>"><span>服务中心</span></a></li> ??? <li><a href="<a href="http://cn.hualidianlan.com/">http://cn.hualidianlan.com/</a>"><span>产品展示</span></a></li> ??? <li><a href="<a href="http://cn.hualidianlan.com/">http://cn.hualidianlan.com/</a>"><span>新闻中心</span></a></li> ??? <li><a href="<a href="http://cn.hualidianlan.com/">http://cn.hualidianlan.com/</a>"><span>招聘信息</span></a></li> ??? <li><a href="<a href="http://cn.hualidianlan.com/">http://cn.hualidianlan.com/</a>"><span>留言反馈</span></a></li> ??? </ul> |
至此，你需要的高亮效果已经给力实现，而且此方法可应用于很多地方，自己可以慢慢发挥！
附加另一种调用方式
|
1 2 3 4 5 6 7 |
[e:loop={'select classid,classname,classpath from [!db.pre!]enewsclass order by classid',0,24,0}] <li class="" id="nav_<?=$bqr[classid]?>"><a href="<?=$public_r[newsurl]?><?=$bqr[classpath]?>" title="<?=$bqr[classname]?>" target="_self" ><?=$bqr[classname]?></a></li> [/e:loop] <script> var changeclass=window.document.getElementById('nav_[!--self.classid--]'); changeclass.className='cur'; </script> |
转载请注明：网页阁吧 » 超实用jquery效果