最近做了一个网站,需要设置导航栏的act属性,这里需要用到addClass以及removeClass:

$('#topName li').removeClass('active');
$(this).addClass('active');

  但是无论怎么都没成功,后来又找到一个需要进行地址匹配一下,忘记看的哪个了,跟下面这个方法一样,就直接粘过来了(这里还有地址~~):

$(document).ready(function(){
$(".navUl li a").each(function(){
$this = $(this);
if($this[0].href==String(window.location)){ //就是这里,需要取跳转页面后的地址,但是我的地址中只要是中文就一直出现乱码
$(".navUl li").removeClass("active");
$this.parent().addClass("active"); //active表示被选中效果的类名
}
});
});

原文:https://blog.csdn.net/weixin_42903350/article/details/82842081

  为了乱码,我捣鼓了一段时间,然后找到了转码的方法:

 obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);

  使用decodeURIComponent()就可以了,嗯,取地址好多方法,我看的这篇—》 直接附别人的文章https://www.cnblogs.com/cang12138/p/7677239.html

//获取当前窗口的路径
var pathname = window.location.pathname;
//结果:/Home/Index //获取参数
var search = window.location.search;
//结果:?id=2

  我需要用到pathname并上search取出的地址,再进行转码,下面是我的代码:

<script type="text/javascript">
$(function () {
$("#topName").find("li").each(function () {
var a = $(this).find("a:first")[0];
var searchUrl = decodeURI(window.location.search); //自动取当前页面的地址,这里主要是对NewsType的值进行解码
var pathUrl = window.location.pathname + searchUrl;
if ($(a).attr("href") === pathUrl)
{
$(this).addClass("act");
} else {
$(this).removeClass("act");
}
});
})
</script>
<div class="container" >
<ul id="topName">
<li class="act"><a href="/PCSite/News/NewsList?NewsType=全部" target="_top">全部</a></li>
<li><a href="/PCSite/News/NewsList?NewsType=公告1" target="_top">公告1</a></li>
<li><a href="/PCSite/News/NewsList?NewsType=公告2" target="_top">公告2</a></li>
<li><a href="/PCSite/News/NewsList?NewsType=公告3" target="_top">公告3</a></li>
<li><a href="/PCSite/News/NewsList?NewsType=公告4" target="_top">公告4</a></li>
<li><a href="/PCSite/News/NewsList?NewsType=公告5" target="_top">公告5</a></li>
</ul>
</div>

 这样就能实现在页面刷新后动态添加act的功能。

ps:如有侵权,请联系,立马删!

导航栏动态添加act属性的更多相关文章

  1. AngularJS 导航栏动态添加.active

    在传统jQuery中,实现导航栏动态添加.active类的思路比较简单,就是当点击的时候,清除其他.active,然后给当前类加上.active. 但是在AngularJS中,就不能再采用这种jQue ...

  2. 右侧导航栏(动态添加数据到list)

    页面样式 <style> .scroll { position: fixed; right: 5%; top: 5em; background: #ccc; display: none; ...

  3. vue组件导航栏动态添加class

  4. python装饰器、继承、元类、mixin,四种給类动态添加类属性和方法的方式(一)

    介绍装饰器.继承.元类.mixin,四种給类动态添加类属性和方法的方式 有时候需要給类添加额外的东西,有些东西很频繁,每个类都需要,如果不想反复的复制粘贴到每个类,可以动态添加. # coding=u ...

  5. 在开源UOJ的导航栏中添加新页面链接

    前言 刚用开源UOJ搭建OJ成功时就想在导航栏那里添加一个站内页面链接,无奈当时乱搞水平低,网上也没有教程,不晓得怎么弄 今天突然来了闲情乱搞一通,结果还真乱搞成了...特意写下为后来人少走点弯路 前 ...

  6. 第六种方式,python使用cached_property缓存装饰器和自定义cached_class_property装饰器,动态添加类属性(三),selnium webdriver类无限实例化控制成单浏览器。

    使用 from lazy_object_proxy.utils import cached_property,使用这个装饰器. 由于官方的行数比较少,所以可以直接复制出来用自己的. class cac ...

  7. vue 动态添加对象属性

    昨天使用vue发现直接给对象添加属性,并不能触发响应更新,后来看文档发现要通过this.$set 函数动态添加才可用,eg: this.$set( obj, key, data)

  8. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

  9. iOS - 导航栏UINavigationController经常使用属性

    1.设置导航栏标题 self.title = @"dylan_李伟宾"; 2.设置导航栏样式 设置方法: [self.navigationController.navigation ...

随机推荐

  1. Idea主题下载

    http://www.riaway.com/ 将jar导入

  2. Vagrant上运行SITL

    打算给Tower加个手机遥控的功能,用运行于vagrant sitl来联合调试,在公司的网络条件很好的情况下没出任何错,都是根据http://ardupilot.org/dev/docs/settin ...

  3. TypeError: softmax() got an unexpected keyword argument 'axis'

    出现这个问题,有几种解决办法,可以调低一下keras的版本,比如: pip install keras==2.1 不过还有个更方便的方法,从错误可知softmax中不包含axis这个参数,那么把axi ...

  4. iView -- TimePicker 自定义修改时间选择器选择时间面板样式

    iView官方组件展示效果: 期望的最终效果: 为什么要修改期望效果? 项目需要只选择小时,分钟跟秒的不需要,而官方并没有直接相关的小时组件或者是设置显示成小时或分钟或秒的时间选择器,因为自己直接修改 ...

  5. .Net ABP 框架 service 无法访问

    最近在看ABP框架,按照文档写好service后,怎么也访问不到,后来发现,忘记把service类设置为public的了! 不写public ABP框架就不能将这个service映射为controll ...

  6. java - day008 -final ,static ,访问控制符.

    面向对象   封装         类: 模板         对象: 实例         引用,遥控器         构造方法                新建对象时执行           ...

  7. HTML5画布小dome八卦图

      <!DOCTYPE html>   <html>   <head>   <meta charset="utf-8" />   & ...

  8. BeanUtils.copyProperties缓解代码压力,释放双手

    简单描述:之前在写代码的时候,经常把表单提交到后台的对象的参数,通过getter方法取出来,然后,再通过setter方法传递给需要的对象,代码中写了很多get set这种方法,后来听同事说,sprin ...

  9. 合并多个对象并且去重的2种写法(es6)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. ****微信小程序架构解析

    | 导语   微信小程序的公测掀起了学习小程序开发的浪潮,天生跨平台,即用即走.媲美原生体验.完善的文档.高效的开发框架,小程序给开发者带来了很多惊喜.通过这篇文章和大家一起分析小程序的架构,分享开发 ...