gpt4 book ai didi

简单的jquery左侧导航栏和页面选中效果

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章简单的jquery左侧导航栏和页面选中效果由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

这里是要实现导航的左侧并选中的,此功能需引用jquery 。

左侧导航:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class= "box" >
<ul class= "menu" >
<li class= "level1" >
<a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >衬衫</a>
<ul class= "level2" >
<li><a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >短袖衬衫</a></li>
<li><a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >长袖衬衫</a></li>
<li><a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >短袖T恤</a></li>
<li><a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >长袖T恤</a></li>
</ul>
</li>
<li class= "level1" >
<a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >卫衣</a>
<ul class= "level2" >
<li><a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >开襟卫衣</a></li>
<li><a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >套头卫衣</a></li>
<li><a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >运动卫衣</a></li>
<li><a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >童装卫衣</a></li>
</ul>
</li>
<li class= "level1" >
<a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >裤子</a>
<ul class= "level2" >
<li><a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >短裤</a></li>
<li><a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >休闲裤</a></li>
<li><a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >牛仔裤</a></li>
<li><a href= "#none" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" 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>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/* reset */
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 ;
}
?
1
2
3
4
5
6
7
8
9
10
<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左侧导航栏和页面选中效果的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com