您的位置：首页 > Web前端 > JQuery

jQuery实现导航条功能

2013-04-18 14:27 302 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航