用js实现导航菜单点击切换选中时高亮状态
随着用户点击导航或菜单上不同的页面,出现此选项高亮显示或变为一个新的样式是经常用到的。实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。
实现代码:
<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<style>
.menu { padding:0; margin:0; list-style-type:none;}
.menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }
.menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
.cur{ background:#D96C00; font-weight:bold;}
</style>
<ul class="menu" id="menu">
<li><a href="demo.html">首页</a></li>
<li><a href="te1.html">PHP综合</a></li>
<li><a href="te2.html">Ecshop</a></li>
</ul>
<script type="text/javascript">
var urlstr = location.href;
//alert((urlstr + '/').indexOf($(this).attr('href')));
var urlstatus=false;
$("#menu a").each(function () {
if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
$(this).addClass('cur'); urlstatus = true;
} else {
$(this).removeClass('cur');
}
});
if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>
演示1(静态链接的效果):http://www.daixiaorui.com/Public/demo/js/navCur/demo.html
演示2(动态链接的效果):http://www.daixiaorui.com/Public/demo/js/navCur/demo1.html?aa=1
用js实现导航菜单点击切换选中时高亮状态的更多相关文章
- 用js实现超链接导航菜单点击切换选中时的状态
项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了 ...
- Maven问题总结:Eclipse中项目右键菜单中点击Maven->Update Projects时JDK被重置
Eclipse中在项目右键菜单点击->Maven->Update Projects时,JDK总是切回 1.5 如果没有在Maven中配置过JDK版本,只是在Eclipse中项目的Prope ...
- Taro button点击切换选中状态
1.引入组件 2.state中设置选中状态 // button按钮的默认选中,0代表选中 state = { currentIndex: 0 } 3.设置class的样式,点击更改选中 selectN ...
- 导航菜单点击图片切换--jquery
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS——树形导航菜单(html的ul嵌套,jQuery的css(),show(),hide(),index()等方法)
必备工具:jquery库文件.我这里用的是1.4版本的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- FragmentTabHost切换Fragment时保存状态,避免切换Fragment走onCreateView和onDestroyView方法;
FragmentTabHost这个控件每次切换Fragment,都会走Fragment的onCreateView和onDestroyView方法,多以每次切换都会创建和销毁Fragment实例,先来看 ...
- [Asp.Net Core] Blazor Server Side 项目实践 - 切换页面时保留状态
前言: 这是 项目实践系列 , 算是中高级系列博文, 用于为项目开发过程中不好解决的问题提出解决方案的. 不属于入门级系列. 解释起来也比较跳跃, 只讲重点. 因为有网友的项目需求, 所以提前把这些解 ...
- js设置输入框失去光标与光标选中时样式
输入框样式 <script language="javascript" type="text/javascript"> function glb_s ...
- Angular+Bootstrap3导航菜单
Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...
随机推荐
- IOS导航栏的使用方法
本文是使用纯代码实现一个导航栏的效果.单击按钮并且产生事件.基本思路是: 1.创建一个导航栏(UINavigationBar对象) 2.创建一个导航栏集合(UINavigationItem对象) 3. ...
- Display Images in widget
在自定义的widget中显示图片. 思路:定义类MyWidget,public 继承自QWidget,然后实现 void paintEvent(QPaintEvent *). 新建Empty qmak ...
- Hello Qt
版本:Qt 5.5.1 Windows 参考: C++ GUI Programming with Qt 4 Second Edition 1. 打开 Qt Creator,File -> New ...
- 响应式布局susy框架之入门学习篇
学习响应式网站设计已经持续了一段时间,对sass,less,compass,grunt等等有了整体上的了解认识,但是由于产品的不可预知性,以及前端要求使用sass语言而且不适用bootstrap,所以 ...
- Android布局居中的几种做法
Android的布局文件中,如果想让一个组件(布局或View)居中显示在另一个布局(组件)中,可以由这么几种做法: android:layout_gravity android:gravity and ...
- HDU 5092
http://acm.hdu.edu.cn/showproblem.php?pid=5092 卡读题,实质是每行取一个点,从上到下找一条路径权值和最小,点可以到达的地方是周围八个格子 类似数塔的dp, ...
- HDU 1052
http://acm.hdu.edu.cn/showproblem.php?pid=1052 田忌赛马本质就是一个贪心 res表示田忌的胜利场次 1.田忌最快马快于王的最快马,两个最快马比,res++ ...
- 中文圣经 for Android
中文圣经(For Android) 目前,中文圣经App包含了如下圣经版本: 和合本 现代中文译本 吕振中译本 中文新译本 英文标准本(ESV) King James Version(KJV) New ...
- Smart210学习记录------paltform总线
转自http://blog.csdn.net/xiaochongtou123/article/details/7752328 1.概述: 通常在Linux中,把SoC系统中集成的独立外设单元(如:I2 ...
- 联合与枚举 、 高级指针 、 C语言标准库(一)
1 输入一个整数,求春夏秋冬 1.1 问题 在实际应用中,有的变量只有几种可能取值.如人的性别只有两种可能取值,星期只有七种可能取值.在 C 语言中对这样取值比较特殊的变量可以定义为枚举类型.所谓枚举 ...