导航栏的使用

最新推荐文章于 2024-09-26 19:50:45 发布

编小怪

最新推荐文章于 2024-09-26 19:50:45 发布

阅读量105

点赞数 4

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_73945321/article/details/136918005

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏的使用</title>
	</head>
    <style>
        	* {
				margin: 0px;
				padding: 0px;
			}
 
			ul li {
				list-style: none;
			}
 
			#main {
				width: 300px;
				height: 250px;
				margin: 20px auto;
				
			}
 
			#head {
				width: 300px;
				height: 50px;
				background-color: darkgrey;
				border: 1px black solid;
				float: left;
			}
			#head h2{
				float: left;
				font-size: 18PX;
				padding-top: 14px;
				width: 200px;
				margin-left: 10px;
				
			}
 
			#pic {
				display: block;
				background: url(../img/pic.png);
				width: 25px;
				float: right;
				height: 12.5px;
				margin-top: 20px;
				
			}
			#body{
			 border: black 1px solid;
			 width: 300px;
			 height: 200px;
			}
 
			#content ul li {
				float: left;
				width: 80px;
				font-size: 12px;
				margin-left: 10PX;
				margin-top: 10PX;
			}
			#content ul li a {
				color: #000000;
			
			}
			
			#foot {
				float: right;
				clear: both; /* 不浮动 */
			}
    </style>
	<body>
		<div id="main">
			<div id="head">
				<h2>图书分类</h2>
				<span id="pic" index="0">
				</span>
			</div>
			<div id="body">
				<div id="content">
					<ul>
						<li><a href="#">小说</a><i>(1110)</i></li>
						<li><a href="#">文艺</a><i>(2350)</i></li>
						<li><a href="#">青春</a><i>(1985)</i></li>
						<li><a href="#">少儿</a><i>(1102)</i></li>
						<li><a href="#">生活</a><i>(2350)</i></li>
						<li><a href="#">社科</a><i>(5684)</i></li>
						<li><a href="#">管理</a><i>(1256)</i></li>
						<li><a href="#">计算机</a><i>(2135)</i></li>
						<li><a href="#">教育</a><i>(3120)</i></li>
						<li><a href="#">工具书</a><i>(4213)</i></li>
						<li><a href="#">引进版</a><i>(1752)</i></li>
						<li><a href="#">其他类</a><i>(9872)</i></li>
					</ul>
				</div>
				<div id="foot">
					<a href="">简化☚</a>
				</div>
			</div>
		</div>
		<script src="jquery-3.7.1 (1).js"></script>
		<script type="text/javascript">
			$(function(){
				$("#pic").click(function(){
					var index = $(this).attr("index");
					if (index == 0) {
						//修改图标
						$(this).css("background","url(img/pic.png)");
						$(this).css("margin-top","20px");
						$(this).attr("index","1");
						//让内容隐藏
						$("#body").slideUp(1000);
					} else{
						//修改图标
						$(this).css("background","url(img/pic.png)0 12.5px");
						$(this).css("margin-top","24px");
						$(this).attr("index","0");
						//让内容显示
						$("#body").slideDown(1000);
						
					}
				});
				$("#foot>a").click(function(){
					//判断li是否是隐藏
					if($("#content>ul>li").is(":hidden")){
						//是隐藏就显示
						$("#content>ul>li").fadeIn(1000);
						$(this).text("简化☚");
						return false;
					}else{
						//不是隐藏就隐藏
						$("#content>ul>li:gt(4)").not(":last").fadeOut(1000);
						$(this).text("更多");
						return false;
					}
				});
			});
		</script>
	</body>
</html>