首页 > 文章资讯 > 站长教程 > 建站知识 > 导航栏中当前栏目高亮代码 html+css+js

导航栏中当前栏目高亮代码 html+css+js

时间：2023年11月28日

来源：网络

编辑：佚名

在导航栏目中对当前栏目进行高亮设置，可以对用户有很好的用户体验，让你用户可以快速知道自己所在的位置，在很多cms中使用过程中，只能设置很多的不同模板样式代码来对每个栏目来实现这个功能，其实非常麻烦不适用，而且这样对后期的管理也非常不方便，大章力在研究一段时间后通过html+css+js的方法可以很好的实现当前栏目高亮的效果，(ps因为现在写代码前端都是用bootstrap5框架了，没有jquery，也不想为了实现这么一个功能去加载一个jquery)，下面整理下这个代码。
html导航栏的设置
通常的情况下我们的导航是如下代码(案例说明就没有加超链接)
<div class="nav">
<ul>
<li>首页</li>
<li>关于我们</li>
<li>联系我们</li>
<li>服务项目</li>
<li>公司资讯</li>
<li>产品内容</li>
</ul>
</div>
给每个栏目加一个唯一识别的id，以便后去抓取栏目
<div class="nav">
<ul>
<li id="navid_1">首页</li>
<li id="navid_2">关于我们</li>
<li id="navid_3">联系我们</li>
<li id="navid_4">服务项目</li>
<li id="navid_5">公司资讯</li>
<li id="navid_6">产品内容</li>
</ul>
</div>
JS代码代码设置

<script type="text/javascript">
var cur_nav = document.getElementById("navid_" + 8);
cur_nav.className = "on";
</script>
<script type="text/javascript">
function navOn(id){
var on = $("#navid_" + id);
if( on.length < 1 ){
$(".nav li").eq(0).find("a").addClass("on");
}else{
$("#navid_" + id).addClass("on");
}
};</script>
CSS样式代码设置
li.on {color:#e60012;}
原理就是获取当前栏目id，如果id不同就是不同的，如果id相同这个li就会添加一个.on的类，来实现当前栏目高亮。

新闻资讯更多

猜你需要