最近做了一个网站,需要设置导航栏的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. win10 64位Python 3.6.2 + Django 环境安装

    一.安装Python3.6.2 1.下载安装包 https://www.python.org/downloads/release/python-362/ 2.一直下一步,记得到了这个界面全部勾选再下一 ...

  2. L1-Day12

    1.凡是杀不死你的都会让你变得更强.(什么关系?主语是什么?)[我的翻译]There is no killing you makes you stronger.[标准答案]What doesn’t k ...

  3. JAVA进阶17

    ---恢复内容开始--- 间歇性混吃等死,持续性踌躇满志系列-------------第17天 1.递归结构 递归是一种常见的解决问题的方法,即把问题逐渐简单化.递归的基本思想就是自己就是“自己调用自 ...

  4. Spring框架-IOC和AOP简单总结

    参考博客: https://blog.csdn.net/qq_22583741/article/details/79589910 1.Spring框架是什么,为什么,怎么用 1.1 Spring框架是 ...

  5. CentOS搭建GIT服务器

    安装git # 请确保您切换到了root账户 $ su root $ yum install -y git # 验证是否安装成功 $ git --version # 输出如下内容表示成功: git v ...

  6. 测试highlightjs主题1

    package top.shaoxiu.scheduleTask; import org.springframework.scheduling.annotation.EnableScheduling; ...

  7. AJAX的原理

    AJAX 什么是AJAX AJAX= Asynchronous JavaScript and XML(异步的 JavaScript 和 XML): AJAX 不是新的编程语言,而是一种使用现有标准的新 ...

  8. kali linux 网络配置

    /etc/init.d/networking restart service newworking restart ifdown eth0 ifup eth0 ifconfig down eth0 i ...

  9. C#应用编程小例子-03-展示另一个窗体

    C#应用编程小例子-03-展示另一个窗体 using System; using System.Collections.Generic; using System.ComponentModel; us ...

  10. Java线段树

    线段树不是完全二叉树,是平衡二叉树 堆也是平衡二叉树 堆满二叉树: h层,一共有2^h-1个节点(大约是2^h) 最后一层(h-1层)有2^(h-1)个节点 最后一层的节点数大致等于前面所有层节点之和 ...