实际项目导航栏菜单切换的简单实现
2013-11-06 12:51
369 查看
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>url-test</title> <style type="text/css"> .nav{ background-color:pink; width:800px; height:100px; leight:100px; margin:0 auto; } .nav ul{ list-style-type:none; margin:0px; padding:0px; } .nav ul li{ float:left; height:100px; line-height:100px; width:195px; margin-left:4px; } .nav ul li a{ text-decoration:none; background-color:#c3d9ff; display:block; text-align:center; } .nav ul li a:hover{ font-size:50px; color:red; background-color:white; } .nav .current{ background-color:red; color:white; font-size:50px; } </style> </head> <body> <div class="nav"> <ul id="menu"> <li><a href="file:///C:/Users/Administrator/Desktop/demo/billing/menu1/html.html" id="menu1">menu1</a></li> <li><a href="file:///C:/Users/Administrator/Desktop/demo/billing/menu2/html.html" id="menu2">menu2</a></li> <li><a href="file:///C:/Users/Administrator/Desktop/demo/billing/menu3/html.html" id="menu3">menu3</a></li> <li><a href="file:///C:/Users/Administrator/Desktop/demo/billing/menu4/html.html" id="menu4">menu4</a></li> </ul> </div> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var currenturl = window.location.href; if(currenturl.indexOf("/menu1/") != -1) { $(".nav").find("li").eq(0).find("a").addClass("current"); return false; } else if(currenturl.indexOf("/menu2/") != -1) { $(".nav").find("li").eq(1).find("a").addClass("current"); return false; } else if(currenturl.indexOf("/menu3/") != -1 ) { $(".nav").find("li").eq(2).find("a").addClass("current"); return false; } else if(currenturl.indexOf("/menu4") != -1) { $(".nav").find("li").eq(3).find("a").addClass("current"); return false; } }); </script> </body> </html>
demo下载:导航栏菜单切换简单实现Demo
本文出自 “我的JAVA世界” 博客,请务必保留此出处http://hanchaohan.blog.51cto.com/2996417/1320803
相关文章推荐
- Android项目ViewPager+Fragment+RadioButton实现底部导航栏切换
- Android:简单实现ViewPager+TabHost+TabWidget实现导航栏导航和滑动切换
- 纯CSS3单页切换导航菜单界面设计的简单实现
- JavaScript实际应用:简单二级联动菜单实现
- 一个简单的导航栏菜单实现
- JavaScript实际应用:简单二级联动菜单实现
- JavaScript实际应用:简单二级联动菜单实现
- 简单实现Silverlight项目和UserControl的多级切换
- Session用法案例 -->实现简单购物车功能(实际项目可能不会这么使用)
- jQuery+CSS实现简单切换菜单示例
- jquery实现简单的Tab切换菜单
- Fragment 实现底部导航栏的简单切换
- JS实现导航栏项目自动切换标签样式
- ThumbnailMenu 一个简单而精致的 Fragment 菜单控件,以缩略图的形式实现 Fragment 切换
- JavaScript实际应用:简单二级联动菜单实现
- Android实现简单底部导航栏 Android仿微信滑动切换效果
- JavaScript实际应用:简单二级联动菜单实现
- JavaScript实际应用:简单二级联动菜单实现
- jquery实现简单Tab切换菜单效果
- FragmentController实现项目中底部导航栏切换的UI框架