jquery导航栏html页面跳转导航字体变色
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页面跳转导航字体变色的更多相关文章
- 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...
- 运用active和hover实现导航栏的页面切换
.nav ul li a:hover{ background: #3E6EDD;}.nav ul li a:hover img{ display: block;}.nav ul li a.active ...
- 微信小程序页面跳转导航wx.navigateTo和wx.redirectTo
}) wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面. 还是用上面的三张图示作为例子,当使用wx.redirctTo接口跳转页面时,原来的页面将被删除掉,当然,这是小 ...
- iOS 设置导航栏之二(设置导航栏的颜色、文字的颜色、左边按钮的文字及颜色)
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicati ...
- Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航
Flutter中如何实现沉浸式透明Statusbar状态栏效果? 如下图:状态栏是指android手机顶部显示手机状态信息的位置.android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色 ...
- iOS:导航栏的工具条和导航条
功能:用NAV视图控制器打开新的视图,默认工具条和导航条隐藏,双击显示之 // // main.m // Hello // // Created by lishujun on 14-8-28. // ...
- 简单的jquery左侧导航栏和页面选中
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...
- 简单的jquery左侧导航栏和页面选中效果
这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...
- 微信小程序 导航 4种页面跳转 详解
1.wx.navigateTo 保留当前页面,跳转到应用内的某个页面,目前页面路径最多只能十层. 参数:url(可携带参数) .success .fail .complete 可用wxml代替: ...
随机推荐
- MFC下无法为空间添加变量解决
许久不用MFC,今天在vs2008下用MFC写个小东西,结果在为控件添加变量的时候,居然无法成功——那个界面显示怪怪的,点击完成提示失败. 还好同事遇到过这个问题,给出链接http://hi.b ...
- 在用到select2时,临时抱佛脚学习了一下
$('#e3').select2({ placeholder: "请输入", minimumInputLength: 1, separator: ",", // ...
- who is the middle
Description FJ is surveying his herd to find the most average cow. He wants to know how much milk th ...
- mac 下真机调试 android 手机
第一步: 查看usb设备信息 在 终端输入:system_profiler SPUSBDataType 可以查看连接的usb设备的信息 比如我的usb信息如下(部分内容): Spreadtru ...
- JMeter入门
下载及安装 下载地址:http://jmeter.apache.org/download_jmeter.cgi 直接下载Release版本,解压即可使用 MAC.Linux中直接运行:jmeter文件 ...
- Linux ubuntu 10.10安装OpenCv
在windows系统下已经成功做出了一个打开摄像头并检测人脸的小程序了. 开始转战linux,因为最终目标是将程序移植到嵌入式开发板上面. 但是,问题接踵而至~ 首先linux上面要安装OpenCv, ...
- Hibernate映射之OneToOne(第二篇)
这是在项目中实际遇到的一个问题,纠结了很久.一开始参考mkyong的 ,两边都写OneToOne ,后来查看了一下项目经理在原来一些模块中的写法. 学习一下: 首先是E-R图: 一个货品可以进行多次 ...
- CPU相关知识---物理CPU数、物理核数、逻辑核数、逻辑CPU数 ?
一.物理CPU数.物理核数.逻辑核数.逻辑CPU数 相互关系??? 物理CPU数 ---> 每个物理CPU对应物理核数 ---> (每个物理核数对应逻辑核数)物理CPU对应逻辑核数 --- ...
- JQuery学习(层级)ancestor & descendant
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- python学习笔记:Day01
一.python 简介 1. python是Guido van Rossum在1989年圣诞节期间,为了打发无聊的假期而编写的一个编程语言 2. pyhton主要应用于数据分析.组件集成.网络 ...