导航栏添加高亮

导航栏添加高亮的方法如下,一种是jquery写法,一种是原生js写法

一:jquery写法:

$(function(){

var curUrl = window.location.href;

$(".topNav-nav ul li a").each(function(){

var url = $(this).attr('href');

if(curUrl.indexOf(url) != -1){

$(this).addClass("navactive");

return false;

}

});

});


二:原生js写法

<script>
    function hasClass(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    function addClass(obj, cls) {
    if (!this.hasClass(obj, cls)) obj.className += " " + cls;
    }
    var currUrl = window.location.href;
    var num = document.querySelectorAll(".dark-gray-font");
    for(i=0;i<num.length;i++){
    var url = num[i].href;
    if(currUrl.indexOf(url) !== -1){
    addClass(num[i],"navactive");
    }
    }
     
    </script>


要实现导航栏点击高亮的效果,可以使用Freemarker结合HTML和CSS来实现。以下是一种实现方式: 1. 首先,在Freemarker模板中定义导航栏的HTML代码。例如: ``` <ul class="navbar"> <li class="<#if currentPage == 'home'>active</#if>"><a href="/home">Home</a></li> <li class="<#if currentPage == 'about'>active</#if>"><a href="/about">About</a></li> <li class="<#if currentPage == 'contact'>active</#if>"><a href="/contact">Contact</a></li> </ul> ``` 在上面的代码中,我们使用了Freemarker的条件判断语句(`<#if>`)来判断当前页是否与导航栏项对应,如果是,则为该导航栏添加一个名为"active"的CSS类。 2. 接下来,在CSS样式表中定义"active"类的样式。例如: ``` .navbar li.active { background-color: #f00; /* 设置背景色为红色 */ color: #fff; /* 设置文字颜色为白色 */ } ``` 在上面的代码中,我们设置了"active"类的背景色和文字颜色,你可以根据需要进行调整。 3. 最后,在后端代码(Java、Spring、Servlet等)中将当前页的信息传递给Freemarker模板。例如: ```java model.addAttribute("currentPage", "home"); // 将当前页设置为"home" ``` 在上面的代码中,我们使用了Java的Spring框架的`model`对象来将当前页信息传递给Freemarker模板。你可以根据自己的项目实际情况来传递当前页的信息。 通过以上步骤,当用户访问不同的页面时,对应的导航栏项会自动添加"active"类,从而实现点击高亮效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值