简单的jquery左侧导航栏和页面选中效果
这里是要实现导航的左侧并选中的,此功能需引用jquery
效果:

左侧导航
<div class=
"box"
>
<ul class="menu">
<li class="level1">
<a href="#none" rel="external nofollow">衬衫</a>
<ul class="level2">
<li><a href="#none" rel="external nofollow">短袖衬衫</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="level1">
<a href="#none" rel="external nofollow">衬衫</a>
<ul class="level2">
<li><a href="#none" rel="external nofollow">短袖衬衫</a></li>
</ul>
</li>
</ul>
</div>
js代码:
<script type=
"text/javascript"
>
//等待dom元素加载完毕.
$(document).ready(
function
(){
$(
".level1 > a"
).click(
function
(){
$(
this
).addClass(
"current"
)
//给当前元素添加"current"样式
.next().show()
//下一个元素显示
.parent().siblings().children(
"a"
).removeClass(
"current"
)
//父元素的兄弟元素的子元素<a>移除"current"样式
.next().hide();
//它们的下一个元素隐藏
return
false
;
});
});
</script>
css
body{
margin
:
0
;
padding
:
0
0
12px
0
;
font-size
:
12px
;
line-height
:
22px
;
font-family
:
"\5b8b\4f53"
,
"Arial Narrow"
;
background
:
#fff
;}
form,ul,li,p,h
1
,h
2
,h
3
,h
4
,h
5
,h
6
{
margin
:
0
;
padding
:
0
;}
input,select{
font-size
:
12px
;
line-height
:
16px
;}
img{
border
:
0
;}
ul,li{
list-style-type
:
none
;}
a {
color
:
#00007F
;
text-decoration
:
none
;}
a:hover {
color
:
#bd0a01
;
text-decoration
:
underline
;}
.box {
width
:
150px
;
margin
:
0
auto
;
}
.menu{
overflow
:
hidden
;
border-color
:
#C4D5DF
;
border-style
:
solid
;
border-width
:
0
1px
1px
;
}
/* lv1 */
.menu li.level
1
a{
display
:
block
;
height
:
28px
;
line-height
:
28px
;
background
:
#EBF3F8
;
font-weight
:
700
;
color
:
#5893B7
;
text-indent
:
14px
;
border-top
:
1px
solid
#C4D5DF
;
}
.menu li.level
1
a:hover{
text-decoration
:
none
;}
.menu li.level
1
a.current{
background
:
#B1D7EF
;}
/* lv2 */
.menu li ul{
overflow
:
hidden
;}
.menu li ul.level
2
{
display
:
none
;}
.menu li ul.level
2
li a{
display
:
block
;
height
:
28px
;
line-height
:
28px
;
background
:
#ffffff
;
font-weight
:
400
;
color
:
#42556B
;
text-indent
:
18px
;
border-top
:
0px
solid
#ffffff
;
overflow
:
hidden
;
}
.menu li ul.level
2
li a:hover{
color
:
#f60
;
}
JS
<script type=
"text/javascript"
>
$(document).ready(
function
(){
$(
".level2 a"
).each(
function
(){
$
this
= $(
this
);
if
($
this
[0].href==String(window.location)){
$
this
.addClass(
"hover"
);
}
});
});
</script>
简单的jquery左侧导航栏和页面选中效果的更多相关文章
- 简单的jquery左侧导航栏和页面选中
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...
- jQuery Mobile 导航栏
jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...
- ElementUI+命名视图实现复杂顶部和左侧导航栏
在了解了命名视图的用途后,发现用命名视图来实现复杂导航更加省力.更多知识请参考这里 这里只说明重要配置内容,其他内容配置请参考上一篇初始版本: ElementUI 复杂顶部和左侧导航栏实现 或参考文末 ...
- ElementUI 复杂顶部和左侧导航栏实现
描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...
- jQuery实现导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- dedecms左侧导航栏不显示问题
dedecms左侧导航栏不显示问题 在做织梦项目时,经常会碰到后台左侧导航栏不显示的问题,如下所示: 这主要是由于文件权限不足造成的.有两种方法 第一种:把 /data 文件夹全部改成 777 权 ...
- CI框架后台添加左侧导航栏出现的一系列问题
- MFC office2007风格设置左侧导航栏 [转]
当基础的框架搭好以后,我想为其添加一个左侧导航栏,过程如下:在框架类的头文件添加一个导航栏参数: CMFCOutlookBar m_navigation; 为了完善功能,在导航栏里面我添加了一个CTr ...
- 修改layui的后台模板的左侧导航栏可以伸缩
原生的左侧导航栏代码: <div class="layui-side layui-bg-black"> <div class="layui-side-s ...
随机推荐
- MVC+Spring.NET+NHibernate .NET SSH框架整合
在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MVC框架以后太灵活了(相比之前的web Form),嗯,关于.NET中的MVC框架我 ...
- 自己做得一个用于直观观察css3 transform属性中的rotate 3D效果
这段代码还是非常简单,是看了一个老师的视频受的启发,也是调用了很多个函数,所以比较杂乱吧! <!DOCTYPE html><html lang="en">& ...
- koa中间件系统原理及koa+orm2实践。
koa是由 Express 原班人马打造的新的web框架.套用其官方的说法:Koa 应用是一个包含一系列中间件 generator 函数的对象. 这些中间件函数基于 request 请求以一个类似于栈 ...
- js模块化加载器实现
背景 自es6以前,JavaScript是天生模块化缺失的,即缺少类似后端语言的class, 作用域也只以函数作为区分.这与早期js的语言定位有关, 作为一个只需要在网页中嵌入几十上百行代码来实现一些 ...
- flex中日期的格式化
今天我做的项目中需要把时间给拆分了,形式为:yyyy-MM-DD HH mm, 下面是我的代码实现: <?xml version="1.0" encoding="u ...
- x战警 天启高清完整版下载
天启出生于埃及第一王朝,是地球上最古老.最强大的变种人沙巴泊,曾拥有无数信众,但后来遭人背叛,被人活埋.几千年后,强大无匹而且永生不朽的天启从数千年的深埋中获释,愤怒的他发现同类不再被视为神祇,他对人 ...
- ASP.NET Web服务(ASMX)学习和代理生成
第一步:按照http://www.c-sharpcorner.com/article/getting-started-with-asp-net-web-services-part-one/ 建立项目和 ...
- WPF之路三:视频的播放
同图片一样,把视频资源复制到文件夹路径下,修改资源属性复制到输出目录"始终复制",生成操作改为“内容”, 把<MediaElement Name="myVid&q ...
- 在IIS上部署你的ASP.NET Core项目
概述 与ASP.NET时代不同,ASP.NET Core不再是由IIS工作进程(w3wp.exe)托管,而是使用自托管Web服务器(Kestrel)运行,IIS则是作为反向代理的角色转发请求到Kest ...
- 4日6日--Math的常用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...