设为首页收藏本站关注微信<<< 抵制 IE6 人人有责 >>>
搜索
热搜: 活动 交友 discuz
查看: 2042|回复: 0
打印 上一主题 下一主题

[Jquery] jquery 实现导航菜单高亮显示

[复制链接]
跳转到指定楼层
楼主
发表于 2016-1-26 10:22:03 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我爱学习</title>
<style>
body, ul, ol, li, div, p {
	margin: 0px;
	padding: 0px;
}
ul {
	list-style-type: none;
	border: 1px solid blue;
	background: #4f5b93;
	height: 45px;
}
ul li {
	float: left;
	heihgt: 45px;
	line-height: 45px;
	width: 100px;
	text-align: center;
}
ul li a:link, a:visited {
	color: #fff;
	text-decoration: none;
}
.act {
	background: #ff6600;
}
</style>
<script src="http://www.kevin-ying.com/jq/jquery-2.1.4.min.js"></script>
<script>

$(function(){

$('ul li').eq(0).addClass("act");

 $('ul li').each(function(){

   $(this).click(function(){

       $(this).addClass("act").siblings().removeClass("act");

      })

  })

})

</script>
</head>

<body>
<ul>
  <li><a href="http://www.kevin-ying.com/">首页</a></li>
  <li><a href="http://www.kevin-ying.com/">随笔</a></li>
  <li><a href="http://www.kevin-ying.com/">素材</a></li>
  <li><a href="http://bbs.kevin-ying.com/">编程</a></li>
</ul>
</body>
</html>


实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式。

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享淘帖
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记    

GMT+8, 2024-11-1 08:30 , Processed in 0.124800 second(s), 26 queries .

Powered by Mr.Kevin-ying

© 2004-2015

快速回复 返回顶部 返回列表