html代码:

<div class="collapse">
<ul class="nav">
<li><a href="index.html" class="active">首页</a></li>
<li> <a href="team.html"> 商务合作</a></li>
<li> <a href="about.html"> 关于我们</a></li>
</ul>
</div>

jquery代码:

$(document).ready(function(){
$(".collapse a").each(function(){
$this = $(this);
if($this[0].href==String(window.location)){
$(".collapse a").removeClass("active");
$this.addClass("active");
}
});
});

jquery导航栏html页面跳转导航字体变色的更多相关文章

  1. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  2. 运用active和hover实现导航栏的页面切换

    .nav ul li a:hover{ background: #3E6EDD;}.nav ul li a:hover img{ display: block;}.nav ul li a.active ...

  3. 微信小程序页面跳转导航wx.navigateTo和wx.redirectTo

    }) wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面. 还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小 ...

  4. iOS 设置导航栏之二(设置导航栏的颜色、文字的颜色、左边按钮的文字及颜色)

                      #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicati ...

  5. Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航

    Flutter中如何实现沉浸式透明Statusbar状态栏效果? 如下图:状态栏是指android手机顶部显示手机状态信息的位置.android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色 ...

  6. iOS:导航栏的工具条和导航条

    功能:用NAV视图控制器打开新的视图,默认工具条和导航条隐藏,双击显示之 // // main.m // Hello // // Created by lishujun on 14-8-28. // ...

  7. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  8. 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...

  9. 微信小程序 导航 4种页面跳转 详解

    1.wx.navigateTo   保留当前页面,跳转到应用内的某个页面,目前页面路径最多只能十层.  参数:url(可携带参数) .success .fail .complete 可用wxml代替: ...

随机推荐

  1. MFC下无法为空间添加变量解决

    许久不用MFC,今天在vs2008下用MFC写个小东西,结果在为控件添加变量的时候,居然无法成功——那个界面显示怪怪的,点击完成提示失败.    还好同事遇到过这个问题,给出链接http://hi.b ...

  2. 在用到select2时,临时抱佛脚学习了一下

    $('#e3').select2({ placeholder: "请输入", minimumInputLength: 1, separator: ",", // ...

  3. who is the middle

    Description FJ is surveying his herd to find the most average cow. He wants to know how much milk th ...

  4. mac 下真机调试 android 手机

    第一步: 查看usb设备信息 在 终端输入:system_profiler SPUSBDataType     可以查看连接的usb设备的信息 比如我的usb信息如下(部分内容): Spreadtru ...

  5. JMeter入门

    下载及安装 下载地址:http://jmeter.apache.org/download_jmeter.cgi 直接下载Release版本,解压即可使用 MAC.Linux中直接运行:jmeter文件 ...

  6. Linux ubuntu 10.10安装OpenCv

    在windows系统下已经成功做出了一个打开摄像头并检测人脸的小程序了. 开始转战linux,因为最终目标是将程序移植到嵌入式开发板上面. 但是,问题接踵而至~ 首先linux上面要安装OpenCv, ...

  7. Hibernate映射之OneToOne(第二篇)

    这是在项目中实际遇到的一个问题,纠结了很久.一开始参考mkyong的 ,两边都写OneToOne ,后来查看了一下项目经理在原来一些模块中的写法. 学习一下: 首先是E-R图:  一个货品可以进行多次 ...

  8. CPU相关知识---物理CPU数、物理核数、逻辑核数、逻辑CPU数 ?

    一.物理CPU数.物理核数.逻辑核数.逻辑CPU数 相互关系??? 物理CPU数 ---> 每个物理CPU对应物理核数 ---> (每个物理核数对应逻辑核数)物理CPU对应逻辑核数 --- ...

  9. JQuery学习(层级)ancestor & descendant

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  10. python学习笔记:Day01

    一.python 简介 1.  python是Guido van Rossum在1989年圣诞节期间,为了打发无聊的假期而编写的一个编程语言   2.  pyhton主要应用于数据分析.组件集成.网络 ...