导航栏一般做为母版页,为了使增加用户体验,往往在用户进入某个页面给予导航栏相应的样式,这里可以用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动态控制导航栏样式的更多相关文章

  1. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  2. React-Native 之 GD (二)自定义共用导航栏样式

    1.自定义导航栏样式 步骤一:从效果图中可以看出,导航栏的样式都差不多,因为我们前面已经设置了 Navigator ,这边的话我们还需要自定义 Navigator 的样式,可以看到所有的 Naviga ...

  3. 微信小程序------导航栏样式、tabBar导航栏

    一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...

  4. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...

  5. React Navigation 导航栏样式调整+底部角标消息提示

    五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...

  6. JS面向对象方法(一): 使用原生JS 实现导航栏下多级分类弹出效果

    利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...

  7. React实现顶部固定滑动式导航栏(导航条下拉一定像素时显示原导航栏样式)

    摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...

  8. JS自适应导航栏,菜单栏

    1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 <link rel="stylesheet" href=& ...

  9. iOS设置导航栏样式(UINavigationController)

    //设置导航栏baritem和返回baiitem样式 UIBarButtonItem *barItem = [UIBarButtonItem appearance]; //去掉返回按钮上的字 [bar ...

随机推荐

  1. 51nod 1350 斐波那契表示(递推+找规律)

    传送门 题意 分析 我们发现该数列遵循下列规律: 1 1,2 1,2,2 1,2,2,2,3 1,2,2,2,3,2,3,3 我们令A[i]表示f[i]开始长为f[i-1]的i的最短表示和 那么得到A ...

  2. AI进阶之路

    一.方法论 二.发展趋势 三.入门查看 1. https://hongyuxie.github.io/MyResume_CN/ 上班后大家还刷算法题吗 编程面试的 10 大算法概念汇总 技术面试宝典: ...

  3. 【bzoj1965】: [Ahoi2005]SHUFFLE 洗牌 数论-快速幂-扩展欧几里得

    [bzoj1965]: [Ahoi2005]SHUFFLE 洗牌 观察发现第x张牌 当x<=n/2 x=2x 当x>n/2 x=2x-n-1 好像就是 x=2x mod (n+1)  就好 ...

  4. 树链剖分【洛谷P4114】 Qtree1

    P4114 Qtree1 题目描述 给定一棵n个节点的树,有两个操作: CHANGE i ti 把第i条边的边权变成ti QUERY a b 输出从a到b的路径中最大的边权,当a=b的时候,输出0 码 ...

  5. [比赛|考试]nowcoder NOIPpj组第二场

    nowcoder NOIPpj组第二场 370pts/400pts(100,100,100,70) rank3 给自己的反思:前3题都A了,T4O(N^2)不会就是不会(没准是我懒得推了),DP了70 ...

  6. springcloud系列二 搭建注册中心启动

    创建modul 然后就创建完成了 添加yml文件: server: port: eureka: client: register-with-eureka: false #单机版建议设置为false,设 ...

  7. 对bootstrap模态框的小尝试

    bootstrap中有一个“模态框”插件,我理解的意思就是一个具有全局遮罩的弹窗提示,官方解释是:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗 ...

  8. mysql 中decimal中去掉后面多余的0

    #去除Decimal后面多余的0 #处理前SELECT '0.12000','1.203010','-0.20' #处理后SELECT 0+CAST('0.12000' AS CHAR),0+CAST ...

  9. Python-Anaconda练习candy算子用于边缘提取,再用hough变换检测直线边缘

    img: 待检测的图像. threshold: 阈值,可先项,默认为10 line_length: 检测的最短线条长度,默认为50 line_gap: 线条间的最大间隙.增大这个值可以合并破碎的线条. ...

  10. Problem07 处理字符串

    题目:输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数. 程序分析:利用while 语句,条件为输入的字符不为'\n'. import java.util.*; public clas ...