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

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

学习教程tuzi2018-11-23 22:18:11A+A-

高亮显示导航栏代码,通用方式,包括所在内容页 
看了下论坛,大家基本使用的是灵动标签来实现当前栏高亮,我这个方法是根据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>

点击这里复制本文地址

声明

本站发布所有广告信息、下载资源,均来自互联网,非本站自制,与本站无关。 如有侵犯您的合法权益请来信告之。我们会在三个工作日内予以清除。


本站中所有资料、资源文件均来自于网络搜索,仅作为技术学习研究之用,请必须在24小时内删除所下载文件,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。


本站保证站内提供的所有可下载资源(软件等等)都是按“原样”提供,本站未做过任何改动;但本网站不保证本站提供的下载资源的准确性、安全性和完整性;同时本网站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。 


访问本站的用户必须明白,[资源爱好者]对提供下载的软件等不拥有任何权利,其版权归该下载资源的合法拥有者所有。


本站所有资源均不提供相关技术服务,如果源码下载地址失效则请联系站长进行补发。


本站所有资源展现图片仅供参考

资源爱好者 © 本站发布所有资源,均来自互联网,非本站自制,分享目的仅供大家学习与参考,与本站无关。
如有侵犯您的合法权益请来信告之。我们会在三个工作日内予以清除。邮箱:admin?aihao.org
关于我们|广告合作|网站地图|冀ICP备14009590号|冀公网安备 13018302000072号