高亮显示导航栏代码,通用方式,包括所在内容页
看了下论坛,大家基本使用的是灵动标签来实现当前栏高亮,我这个方法是根据js来实现的。如果需要你就试下吧
方法如下,大家可以举一反三,其实是很简单的修改:
<div class="header">
<ul class="menu mct" id="navi">
<li><a href="/">首页</a></li>
<li><a href="/wangluodongtai/">网络动态</a></li>
<li><a href="/youhuajiqiao/">优化技巧</a></li>
<li><a href="/huozaidangxia/">活在当下</a></li>
<li><a href="/woaibiancheng/">我爱编程</a></li>
<li><a href="/xiaojiqiao/">小技巧</a></li>
<li><a href="/hulianwangwen/">互联网文</a></li>
</ul>
</div>
<script type="text/javascript" language="javascript">
var nav = document.getElementById("navi");
var links = nav.getElementsByTagName("li");
var lilen = nav.getElementsByTagName("a"); //判断地址
var currenturl = document.location.href;
var last = 0;
for (var i=0;i<links.length;i++)
{
var linkurl = lilen[i].getAttribute("href");
if(currenturl.indexOf(linkurl)!=-1)
{
last = i;
}
}
links[last].className = "menufirst"; //高亮代码样式
</script>
说明: <ul class="menu mct" id="navi"> 中的ID值(id="navi")要和 var nav = document.getElementById("navi"); 中的想同,即在js中获取id="navi" 值,这个值要唯一,不能跟其它CSS或JS代码中ID同名,或者自己改成别的名字。
links[last].className = "menufirst"; 这一句中的 menufirst 为你的高亮样式。
-------------------------------------------------------------------------
例如:
<div id="main-nav"><div class="wrap cf">
<ul id="navi3" class="menu"><li ><a href="[!--news.url--]">首页</a></li>
[e:loop={"select classname,classpath from [!db.pre!]enewsclass where bclassid=58 order by classid ",0,24,0}]
<li><a href="<?=$public_r[newsurl]?><?=$bqr[classpath]?>"><?=$bqr[classname]?></a></li>
[/e:loop]
</ul></div>
<script type="text/javascript" language="javascript">
var nav = document.getElementById("navi3");
var links = nav.getElementsByTagName("li");
var lilen = nav.getElementsByTagName("a"); //判断地址
var currenturl = document.location.href;
var last = 0;
for (var i=0;i<links.length;i++)
{
var linkurl = lilen[i].getAttribute("href");
if(currenturl.indexOf(linkurl)!=-1)
{
last = i;
}
}
links[last].className = "current-menu-item"; //高亮代码样式
</script>
【帝国cms代码】帝国CMS导航栏js高亮当前栏目,使用JS方法修改改造。
下一篇:【帝国cms代码】帝国CMS调用发布者所有文章列表的两种方法!包含高级应用!
上一篇:【帝国cms代码】帝国cms默认勾选远程保存图片和默认勾选第一张上传图片为标题图片
相关文章
-
315
网站
- 12
小程序
-
35791
文章
-
69
会员
标签云
热门网站
- 去哪玩 www.lotour.com
- 阿里巴巴 www.1688.com
- 国际期货_国内期货_正规期货交易平台【低保证金佣金】_期讯网 www.zgqixun.com
- 美团网 www.meituan.com
- 徐州SEO优化_网络营销SEO顾问_网站建设【博益网】网络SEO推广公司 www.seopre.com
- 分类目录 - 网址(网站)分类目录大全 dir.chaobie.com
- 云鲸扫地机维修网点_narwa www.pbj-wx.com
- 2345网址导航 www.2345.com
- 南方网 www.southcn.com
- 凤凰体育 sports.ifeng.com
最新入驻小程序
热门文章
- new Bing浏览器:侧边栏聊天页面空白的解决方法 04-16
- 还原当年“插刀教”事件始末,杜淳李晨聂远杨紫,近况大不同 12-17
- 林依晨戴玩偶头套可爱自拍笑容甜美十分有少女感 11-05
- 帝国CMS百度主动自动推送插件(ZLPlugin-BDPush Pro)【123目录网分享】 04-15
- 三款适用于企业建站的CMS建站系统 04-08
- 母亲节给婆婆转账五千,打电话告诉她忘挂断电话,听后我决定离婚 05-29
- 热水器两个阀门怎么拧(燃气热水器两个阀门怎么拧紧) 04-18
- 怎么做酸豆角(怎么做酸豆角泡菜) 04-18
- 木糖醇是什么糖(木糖醇是什么物质提炼的) 04-18
- 帝国cms建立目录不成功!请检查目录权限(帝国cms教程官方完整版) 04-05