帝国CMS导航栏js高亮当前栏目,使用JS方法修改改造。

帝国CMS导航栏js高亮当前栏目,使用JS方法修改改造。

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2018-07-21 11:07:06
文章简介

帝国CMS导航栏采用JS实现高亮当前栏目,通过JS方法改造优化,精准定位并高亮显示用户当前所在栏目,提升用户体验。简洁高效,让导航更智能,助您轻松构建优质网站。

  • 正文开始
  • 相关阅读
  • 推荐作品
高亮显示导航栏代码,通用方式,包括所在内容页 
看了下论坛,大家基本使用的是灵动标签来实现当前栏高亮,我这个方法是根据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[带模板的栏目导航标签] 支持栏目别名调用修改方法
« 上一篇 2018年07月21日
帝国CMS调用发布者所有文章列表的两种方法!包含高级应用!
下一篇 » 2018年08月15日
  • 微软bing IndexNow的推送和管理-帝国CMS插件
    23阅读0条评论0个赞
    微软Bing IndexNow推送管理插件,专为帝国CMS打造。本教程指导您如何高效利用该插件,实现网站内容快速被Bing搜索引擎收录。通过简单配置,即可自动化推送新发布或更新的页面至Bing,加速索引过程,提升网站SEO效果。轻松管理推送历史,监控索引状态,确保网站内容及时展现给目标用户。优化网站可见性,从掌握Bing IndexNow推送管理开始。
  • 帝国CMS8.0测试版搜索结果页只显示第1页的解决方法
    50阅读0条评论0个赞
    对于刚安装帝国CMS8.0测试版尝鲜的小伙伴们可能发现,使用高级搜索的时候结果页只显示第1页,虽然帝国CMS开发者说正式版会解决此问题,但是临时使用还是要先解决这个问题的。所以今天墨鱼就说下临时的解决方法。
  • 【优化分享】帝国CMS大数据量筛选性能瓶颈突破实践
    243阅读0条评论5个赞
    突破帝国CMS大数据筛选性能瓶颈实战教程:掌握高效技巧,轻松应对海量数据处理挑战。本教程详解性能优化策略,助力快速筛选,提升系统响应速度。无论你是开发者还是管理员,都能从中获益,实现数据筛选效率飞跃,让帝国CMS在大数据环境下依然流畅运行。立即学习,解锁大数据处理新技能!
  • 帝国CMS统计多个数据表今日更新总数代码
    166阅读0条评论4个赞
    帝国CMS统计多表今日更新总数代码教程:通过SQL查询结合帝国CMS函数,汇总多个数据表中今日更新的记录总数。步骤包括编写SQL联合查询语句,利用`DATE()`函数筛选今日数据,结合帝国CMS的数据库操作函数执行查询,并输出结果。此教程教你高效获取多表今日更新概况,优化管理效率。
  • 帝国cms7.5无刷新 Ajax 点击加载更多列表信息源代码
    825阅读2条评论13个赞
    帝国CMS 7.5 Ajax无刷新加载,高效实现点击加载更多列表信息,精简源码仅展示核心功能,优化用户体验,提升网页加载效率。

如本文对您有帮助,就请墨鱼抽根烟吧!