导航栏动态添加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 ...
随机推荐
- 多个Fragment在一个activity中通过按钮的展示方法
fragment使用方法 1. 创建主Mainactivity extends AppCompatActivity 2. Oncreate & setContentView 3. 完成XML的 ...
- thrift安装及python和c++版本调试
一.安装过程 1.安装依赖库 ]# yum install boost-devel-static libboost-dev libboost-test-dev libboost-program-opt ...
- 20175204 张湲祯 2018-2019-2《Java程序设计》第九周学习总结
20175204 张湲祯 2018-2019-2<Java程序设计>第九周学习总结 教材学习内容总结 -第十一章JDBC和MySQL数据库要点: 1.下载MySQL和客户端管理工具navi ...
- 开头不讲"Hello Word",读尽诗书也枉然 : Word 操作组件介绍 - Spire.Doc (转)
[原文地址]http://www.cnblogs.com/liqingwen/p/5898368.html 序 本打算过几天简单介绍下组件 Spire.XLS,突然发现园友率先发布了一篇,既然 x ...
- 看我如何粘贴别人代码--socketserver
源码执行流程 自己模仿一个(提取代码) 服务器类 import socket import threading import selectors class TCPServer: def __init ...
- ASP.NET Core 项目配置 ( Startup )(转载)
原文:https://www.twle.cn/l/yufei/aspnetcore/dotnet-aspnet-startup.html 由于是个人网站,怕没了,特意复制保存,个人觉得讲的非常透彻 前 ...
- [NOIP2017提高组]小凯的疑惑-扩展欧几里得
#include<bits/stdc++.h> using namespace std; long long a,b,x,y,ans,tmp; inline void ex_gcd(lon ...
- Shell学习笔记(二)
if 语句 最简单的用法就是只使用 if 语句,它的语法格式为: if condition then statement(s) fi condition是判断条件,如果 condition 成立(返回 ...
- CentOS Android Studio桌面图标的创建
1.切换到root用户,在桌面上创建Android.Studio.desktop,如下: [Desktop Entry] Name=Android Studio Comment=Android Stu ...
- 有名的素MM
from math import sqrt item=[] for yr in [1988,1989]: for mth in range(1,13): if mth in [1,3,5,7,8,10 ...