导航栏动态添加act属性
最近做了一个网站,需要设置导航栏的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属性的更多相关文章
- AngularJS 导航栏动态添加.active
在传统jQuery中,实现导航栏动态添加.active类的思路比较简单,就是当点击的时候,清除其他.active,然后给当前类加上.active. 但是在AngularJS中,就不能再采用这种jQue ...
- 右侧导航栏(动态添加数据到list)
页面样式 <style> .scroll { position: fixed; right: 5%; top: 5em; background: #ccc; display: none; ...
- vue组件导航栏动态添加class
- python装饰器、继承、元类、mixin,四种給类动态添加类属性和方法的方式(一)
介绍装饰器.继承.元类.mixin,四种給类动态添加类属性和方法的方式 有时候需要給类添加额外的东西,有些东西很频繁,每个类都需要,如果不想反复的复制粘贴到每个类,可以动态添加. # coding=u ...
- 在开源UOJ的导航栏中添加新页面链接
前言 刚用开源UOJ搭建OJ成功时就想在导航栏那里添加一个站内页面链接,无奈当时乱搞水平低,网上也没有教程,不晓得怎么弄 今天突然来了闲情乱搞一通,结果还真乱搞成了...特意写下为后来人少走点弯路 前 ...
- 第六种方式,python使用cached_property缓存装饰器和自定义cached_class_property装饰器,动态添加类属性(三),selnium webdriver类无限实例化控制成单浏览器。
使用 from lazy_object_proxy.utils import cached_property,使用这个装饰器. 由于官方的行数比较少,所以可以直接复制出来用自己的. class cac ...
- vue 动态添加对象属性
昨天使用vue发现直接给对象添加属性,并不能触发响应更新,后来看文档发现要通过this.$set 函数动态添加才可用,eg: this.$set( obj, key, data)
- 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器
CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...
- iOS - 导航栏UINavigationController经常使用属性
1.设置导航栏标题 self.title = @"dylan_李伟宾"; 2.设置导航栏样式 设置方法: [self.navigationController.navigation ...
随机推荐
- spring基于XML的声明式事务控制
<?xml version="1.0" encoding="utf-8" ?><beans xmlns="http://www.sp ...
- 中国 A 股纳入 MSCI
1 .什么是 MSCI MSCI 是美国指数编制公司 --- 美国明晟公司的简称. 是一家股权,固定资产,对冲基金,股票市场指数的供应商. MSCI 旗下编制了多种指数,他们把全球股票市场分成发达国家 ...
- git怎样删除未监视的文件untracked files
# 删除 untracked files git clean -f # 连 untracked 的目录也一起删掉 git clean -fd # 连 gitignore 的untrack 文件/目录也 ...
- 关于JDK1.7+中HashMap对红黑树场景的思考
背景 在1.7之前的版本,当数组元素较多(几百.几千,或者更多)的时候,在这种前提扩容,涉及全量元素的遍历和坐标的重新定位,这个耗时会比较长.这是之前存在的一个弊端吧.那么引入红黑树之后就解决了问题, ...
- 安装版本( 相关关系 Vue SSR 指定版本)
1. 关于 brew mac包管理器 终端安装 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebr ...
- 安卓触控一体机的逆袭之路_追逐品质_支持APP软件安卓
显示性能参数 接口:RGB信号 分辨率:1024*600 比例16:9 显示尺寸(A.A.):222.72*(W)*125.28(H)mm 外围尺寸:235.0(W)*143.0(H)*4.5(T)m ...
- ORA-01466: 无法读取数据 - 表定义已更改
前几天同事同事误删除数据,经查询发现数据在7:13分时候还是全量 628W行: 于是他将现在的表复制了个备份,其中有数据200W: 于是为了省事,想要直接闪回全表,就把这个表truncate了.... ...
- docker基础命令汇总
搜索镜像 docker search 镜像名称 例如:docker search centos7 下载镜像 docker pull 镜像名称 例如:docker pull centos7 启动容器 d ...
- JS监听浏览器的返回、后退、上一页按钮的事件方法
在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等 ...
- Vue之展示PDF格式的文档
事实上有很多种在前端展示PDF格式文档的方法,小编也用过好多种,例如有<iframe>.<embed>和<object>这些标签,但是在Vue项目里,这些方法都不能 ...