导航栏一般做为母版页,为了使增加用户体验,往往在用户进入某个页面给予导航栏相应的样式,这里可以用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. UWP &WP8.1 依赖属性和用户控件 依赖属性简单使用 uwp添加UserControl

    上面说 附加属性.这章节说依赖属性. 所谓依赖属性.白话讲就是添加一个公开的属性. 同样,依赖属性的用法和附加属性的用法差不多. 依赖属性是具有一个get,set的属性,以及反调函数. 首先是声明依赖 ...

  2. 实现简易Web服务器(c语言)

    任务: (1)实现服务器与客户端间的通信. (2)可以实现HTTP请求中的GET方法. (3)提供静态网页浏览功能,如可浏览:HTML页面,无格式文本,常见图像格式等. (4)提供可以传递参数的动态网 ...

  3. 关于jquery.extend()的坑:我的数组变成相同元素了?

    首先呢我有一个数组,存放了多个json对象.这些json对象的属性有缺失,我设置了一个对象模板来存放默认值 先来看一段代码 var source = [ { name: 'dapianzi', bor ...

  4. Codeforces-D-Diverse Garland(思维)

    You have a garland consisting of nn lamps. Each lamp is colored red, green or blue. The color of the ...

  5. POJ2886Who Gets the Most Candies?(线段树之约瑟夫)

    约瑟夫问题的升级版,每次出去的是前一个出去的人位置+手上的数字(正往前,负往后).第i个出去的人拿的糖是i的约数的个数.求拿糖最多的人和他的糖果数. 这里用到了反素数的知识,在这直接打表 题目 AC代 ...

  6. JS电话、手机号码验证

    function isTelephone(inpurStr) {            var partten = /^0(([1,2]\d)|([3-9]\d{2}))-\d{7,8}$/;     ...

  7. getElementsByTagName() 兼容性

    写东西的时候用到了getElementsByTagName(),我一直以为js 写的东西是不会有兼容性的,这次在ie8下,getElementsByTagName()就不支持了,那怎么办呢,我就查到一 ...

  8. Vue.js-----轻量高效的MVVM框架(十二、组件动态切换)

    在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样: 在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件. html: <h3>动态组件< ...

  9. Notepad++实用插件

    说明: Converter: 编码转换工具,ascii2hex,hex2ascii DoxyIt: 添加文件或者函数注释比较方便 DSpellCheck: 拼写检查 MIME Tools: 将Base ...

  10. android Window(一)从setConetView说起

    Activity的源码 首先从setContentView这里调用的mWindow的 setConetView() private Window mWindow; public void setCon ...