当前位置:首页 > 文章 > 帝国CMS > 正文内容

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

3年前 (2022-10-22)帝国CMS13039

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

 

扫描二维码推送至手机访问。

版权声明:本文由蓝博发布,如需转载请注明出处。

本文链接:https://blueboss.cn/p/775.shtml

“帝国CMS导航栏js高亮当前栏目使用JS方法修改改造适用于分类写死的模板” 的相关文章

帝国cms内容页相关内容根据关键字来调用获取

帝国cms内容页相关内容根据关键字来调用获取

网站文章内容页的相关文章,相关推荐是必不可少的,这些内容可以增加我们网页内容的相关性以及良好的内链结构,是对做SEO优化是很有帮助的。 在使用帝国cms模板建网站的时候,内容页需要调用当前文章的其他相关的文章,根据关键字调用,这样就实现相关性了。 代码示例如下: <?php if ($nav...

帝国CMS做单页自定义页面怎么调用

帝国CMS做单页自定义页面怎么调用

做帝国cms模板网时候,经常需要使用到自定义页面,例如我们做单页(比如“公司介绍”、“联系我们”,联系我们等页面)时一般采用自定义页面的方式来做,那么帝国CMS自定义页面怎么调用呢? 调用出自定义页面导航可以用标签SQL调用。如下: 例子1:调用自定义页面分类ID=1的页面导航 [e:loop={...

帝国cms搜索模板无缓存使用多个搜索模板

帝国cms搜索模板无缓存使用多个搜索模板

网站中用到两个甚至多个搜索模板,在搜索代码中除了会设置指定的模板id以外,还需要更改以下内容,目的就为了解决缓存问题,比如说,用户可能是在搜索“模板”图文列表后,再去搜“教程”,搜索列表显示的还是之前“模板”的搜索模板。提醒大家一定要先备份哟!教程如下: 将以下内容替换到/e/search/resu...

帝国CMS列表内容模板(list.var)调用会员头像会员名称等

帝国CMS列表内容模板(list.var)调用会员头像会员名称等

帝国CMS列表内容模板的list.var里面怎么调用会员头像。会员名称,文章标题和文章链接呢?其实方法也很简单,下面帝国cms模板网就来为大家分享: 标签代码如下: $userr=$empire->fetch1("select userpic  from {$dbtbpre}enewsmem...

帝国cms自定义列表多表查询统计代码

帝国cms自定义列表多表查询统计代码

帝国cms自定义列表多表查询统计代码 统计记录: select count(*) as total from [!db.pre!]ecms_news union select count(*) as total from [!db.pre!]ecms_movie 查询记录: select cl...

帝国CMS内容页面中Description里面调用简介信息

帝国CMS内容页面中Description里面调用简介信息

新闻页面的description介绍调用的和标题一样,那是因为帝国cms模板网制作模板的时候默认是description使用的是帝国CMS系统默认的标签[!--pagedes--]。 如果大家要改成调用文章简介的话也很简单,大家按照下面的标签方法去调用即可实现: 后台>模板>内容模板&g...