最新公告
  • 欢迎您光临站长源码网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 帝国CMS导航栏js高亮当前栏目,使用JS方法修改改造适用于分类写死的模板

    正文概述 管理员   2024-09-02   6

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

    说明:
    <ul class=”menu mct” id=”navi”> 中的ID值(id=”navi”)要和 var nav = document.getElementById(“navi”); 中的相同,即在js中获取id=”navi” 值,这个值要唯一,不能跟其它CSS或JS代码中ID同名,或者自己改成别的名字。

    links[last].className = “cur”; 这一句中的 cur 为你的高亮样式。

    ————————————————————————-
    例如:

    <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 = "cur"; //高亮代码样式( 此处注意:这里是在links也就是li的后边加class="cur")
    </script>
    


    站长源码网 » 帝国CMS导航栏js高亮当前栏目,使用JS方法修改改造适用于分类写死的模板

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    支付宝支付
    余额支付
    ×
    微信扫码支付 0 元