jQuery实现导航条功能

最新推荐文章于 2022-04-07 20:00:40 发布

liu_111111

最新推荐文章于 2022-04-07 20:00:40 发布

阅读量712

点赞数

分类专栏： jQuery 文章标签： jQuery 导航条

本文链接：https://blog.csdn.net/liu_111111/article/details/8818822

版权

jQuery 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:13px}
#divFrame{border:solid 1px #666;width:301px;overflow:hidden}
#divFrame .clsHead h3{padding:0px;margin:0px;float:left}
#divFrame .clsHead span{float:right;margin-top:3px}
#divFrame .clsContent{padding:8px;}
#divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px}
#divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px;}
#divFrame .clsBot{float:right;padding-top:5px;}
</style>

<script type="text/javascript">
// 判断一个控件是显示或隐藏条件:$('#a').is(:visible)
$(function () {
$('.clsBot>a').click(function () {
if ($('.clsBot>a').text() == "简化") {
$('ul li:gt(3)').hide(1000);
$('.clsBot>a').text('更多');
}
else {
$('ul li:gt(3)').show(1000)
$('.clsBot>a').text('简化');

}
});

$('#span1>a').click(function () {
if ($('#span1>a').text() == "挂起") {
$('ul li').hide(3000);
$('.clsBot>a').hide(2000);
$('#span1>a').text('展开');
}
else {
$('ul li').show(3000);
$('.clsBot>a').show(2000);
$('#span1>a').text('挂起');

}
});

})
</script>
</head>
<body>
<div id="divFrame">
<div class="clsHead">
<h3>
导航</h3>
<span id="span1">
<a href="#">挂起</a>
</span><br />
</div>
<div class="clsContent">
<ul>
<li><a href="http://www.baidu.com/">百度</a></li>
<li><a href="http://www.sina.com.cn/">新浪</a></li>
<li><a href="http://www.sohu.com/">搜狐</a></li>
<li><a href="http://www.163.com/">网易</a></li>
<li><a href="http://www.ifeng.com/">凤凰</a></li>
<li><a href="http://www.qq.com/">腾讯</a></li>
<li><a href="http://www.google.com.hk/">谷歌</a></li>
<li><a href="http://www.renren.com/">人人网</a></li>
<li><a href="http://www.taobao.com/">淘宝网</a></li>
<li><a href="http://www.tudou.com/">土豆网</a></li>
<li><a href="http://www.ganji.com/">赶集网</a></li>
<li><a href="http://www.lefeng.com/">乐蜂网</a></li>
</ul>
<div class="clsBot"><a href="#">简化</a>
</div>
</div>
</div>
</body>
</html>

liu_111111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现导航条功能

body{font-size:13px} #divFrame{border:solid 1px #666;width:301px;overflow:hidden} #divFrame .clsHead h3{padding:0px;margin:0px;float:left} #divFrame .clsHead span{float:right;margin-top
复制链接

扫一扫