导航栏动态添加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 ...
随机推荐
- 中文 Tex
\documentclass{article} \usepackage{ctex} \begin{document} 中文English \[E = m c^2\] \end{document} \d ...
- asp.netMVC4使用Bootstrap4
使用: 添加: <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript" ...
- elasticsearch 踩坑
1.elasticsearch head安装 集群连不上,修改配置 add http.cors.enabled: true you must also set http.cors.allow-orig ...
- 非常好用的sersync同步工具
作者:邓聪聪 常用同步工具sync的进阶软件 服务端的配置: uid = rsync gid = rsync port = use chroot = on max connections = time ...
- mvc路由报错
1.添加新项目时,把就项目的dll一起拷贝过来.生成项目,编译通过,打开页面时报错:“找到多个与名为“Home”的控制器匹配的类型 ”,网上的解决方案是,加命名空间,解决,但是自己这边删掉bin中原来 ...
- 【easy】101. Symmetric Tree
判断一棵二叉树是否对称 /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left ...
- m3u8下载转码一次完成
最近看到有部分网站开始加入视频解析服务,虽然这种服务会损害土豆优酷等视频托管商的权益,但是,烦人的广告也让我们开始寻找有没有什么比较靠谱的解决方法~实际上很多网站都在使用m3u8文件格式,里面都是视频 ...
- 资产信息之收集资产代码流程,API的一个认证,数据库表的设计
收集资产代码流程 1.起初我们些的代码是面条式的一堆的逻辑判断. 后来通过了不断的优化升级实现了一个3种方案都支持的CMDB系统,我们用哪种方案只需要在配置文件里修改一下设置就行了. 同时我们 ...
- MySQL之排序、分组(五)
一.排序 格式:select * from 表 order by 字段 asc|desc 1.查询所有的商品进行排序(升序asc.降序desc) mysql> select * from pro ...
- 直流滤波器 verilog
// dc filter- y(n) = c*x(n) + (1-c)*y(n-1) `timescale 1ps/1ps module ad_dcfilter #( // data path dis ...