js动态控制导航栏样式
导航栏一般做为母版页,为了使增加用户体验,往往在用户进入某个页面给予导航栏相应的样式,这里可以用js动态添加
<div class="box_left fl">
<dl class="box_Order">
<dt>订单中心</dt>
<dd><a href="/user/UserOrder">我的订单</a></dd>
<dd><a href="/user/Comment">我的评价</a></dd>
<dd><a href="/user/ConsultingReply">咨询回复及投诉</a></dd>
<dd><a href="#">返修退换货</a></dd>
</dl>
<dl class="box_Order box_Order1">
<dt>我的关注</dt>
<dd><a href="/user/UserAttentionProduct">关注的商品</a></dd>
<dd><a href="/user/UserAttentionStore">关注的商铺</a></dd>
<dd><a href="/user/UserBrowse">浏览历史</a></dd>
</dl>
<dl class="box_Order box_Order1">
<dt>我的金融</dt>
<dd><a href="#">我的养老账户</a></dd>
<dd><a href="#">我的金币</a></dd>
<dd><a href="#">我的理财</a></dd>
<dd><a href="#">优惠券</a></dd>
</dl>
<dl class="box_Order box_Order1">
<dt>我的慈善</dt>
<dd><a href="#">我的文章</a></dd>
<dd><a href="#">我的活动</a></dd>
<dd><a href="#">申请养老金</a></dd>
</dl>
</div>
<script type="text/javascript">
$(function () {
var splitStr = window.location.href.split("?")[0].split("/");
var page = splitStr[splitStr.length - 1].toLocaleLowerCase();
$("a", ".box_left",".fl").each(function (i, u) {
//i用来计数,u获取当前对象
var temp = $(u).attr("href").split('/');
if (temp[temp.length - 1].toLocaleLowerCase() == page) {
$(u).removeClass().addClass("active");
};
});
});
</script>

js动态控制导航栏样式的更多相关文章
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
- React-Native 之 GD (二)自定义共用导航栏样式
1.自定义导航栏样式 步骤一:从效果图中可以看出,导航栏的样式都差不多,因为我们前面已经设置了 Navigator ,这边的话我们还需要自定义 Navigator 的样式,可以看到所有的 Naviga ...
- 微信小程序------导航栏样式、tabBar导航栏
一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...
- 微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...
- React Navigation 导航栏样式调整+底部角标消息提示
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...
- JS面向对象方法(一): 使用原生JS 实现导航栏下多级分类弹出效果
利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...
- React实现顶部固定滑动式导航栏(导航条下拉一定像素时显示原导航栏样式)
摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...
- JS自适应导航栏,菜单栏
1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 <link rel="stylesheet" href=& ...
- iOS设置导航栏样式(UINavigationController)
//设置导航栏baritem和返回baiitem样式 UIBarButtonItem *barItem = [UIBarButtonItem appearance]; //去掉返回按钮上的字 [bar ...
随机推荐
- linux内核中的##__VA_ARGS__有什么作用?
答: 1.__VA_ARGS__是一个可变参数宏: 2. 当可变参数的个数为0时,这里的##起到把前面多余的","去掉的作用,否则会编译出错: 3. 示例 3.1 #defin ...
- Nginx02---指令集实现静态文件服务器
location 实现静态服务器,就是root和alias命令,他们位于location文件块中,详细:https://www.jianshu.com/p/4be0d5882ec5 root root ...
- 解决SMON_SCN_TO_TIME_AUX表损坏故障
同事在给客户做数据库巡检的过程中,发现其中一个数据库的alert日志中报了一个坏块的错误信息,具体如下: Reading datafile '+DATA_DW/xtdw/datafile/sysaux ...
- Windows中报错:Fatal error in launcher: Unable to create process using '"' 的解决方案
Windows 下同时存在 Python2 和 Python3 使用 pip 时系统报错:Fatal error in launcher: Unable to create process using ...
- 【笔记】Django的ORM之多对多表的增和删
[笔记]Django的ORM之多对多表的增和删 Django ORM 多对多 一 昨日补充:外键关联 外键在ORM中的关联方式: 与数据表相关的类都放到models.py文件中 class Book ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_类型转换
1. C# 不要求任何特殊语法即可将一个对象转换为它的任何基类型,因为向基类型的转换被认为是一种安全的隐式转换: 2. 然而,将对象转换为它的某个派生类型时,C#要求开发人员只能进行显示转换,因为这样 ...
- Java中的两个类:Desktop和SystemTray
在JDK6中 ,AWT新增加了两个类:Desktop和SystemTray,前者可以用来打开系统默认浏览器浏览指定的URL,打开系统默认邮件客户端给指定的邮箱发邮件,用默认应用程序打开或编辑文件(比如 ...
- Java对象排序两种方法
转载:https://blog.csdn.net/wangtaocsdn/article/details/71500500 有时候需要对对象列表或数组进行排序,下面提供两种简单方式: 方法一:将要排序 ...
- Python读写操作Excel模块_xlrd_xlwt_xlutils
Python 读写操作Excel -- 安装第三方库(xlrd.xlwt.xlutils.openpyxl) 如果仅仅是要以表单形式保存数据,可以借助 CSV 格式(一种以逗号分隔的表格数据格式)进行 ...
- Python中的数据类型和数据结构
一.数据类型 Python中有六个标准数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Sets(集合) Dictionary(字典) 其中,除列表Lis ...