2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

点击导航栏,切换div内容(js+css+html)

html切换导航栏jscss作者:猿2048志愿者
**成果展示**

在这里插入图片描述
代码展示:*

					<html>
					<head>
						<meta charset="utf-8">
						<meta http-equiv="X-UA-Compatible" content="IE=edge">
						<title></title>
						<link rel="stylesheet" href="">
						<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
						<style>
							.nav {
								overflow: hidden;
								text-align: center;
								background-color: #f4f4f4;
							}
							.nav li {
								float: left;
								padding: 5px;
								width: 50px;
								color: #666;
								list-style: none;
								border-left: 1px solid #f4f4f4;
								cursor: pointer;
							}
							.nav li:hover,.selected {
								background-color:#ecebeb;
								border-left: 1px solid #ecebeb;
							}
							.content{
								border: 1px solid #f4f4f4;
								height: 80px;
								padding: 10px;
								overflow: hidden;
							}
						</style>
					</head>
					<body>
						<ul class="nav">
							<li class="selected">姓名</li>
							<li>年龄</li>
							<li>性别</li>
							<li>班级</li>
						</ul>
						<div class="content">
							<div class="list ">
								<p>姓名:</p>
								<p>&nbsp;&nbsp;&nbsp;黎明</p>
							</div>
							<div  class="list">
								<p>年龄:</p>
								<p>&nbsp;&nbsp;&nbsp;22</p>
							</div>
							<div  class="list">
								<p>性别:</p>
								<p>&nbsp;&nbsp;&nbsp;男</p>
							</div>
							<div  class="list">
								<p>班级:</p>
								<p>&nbsp;&nbsp;&nbsp;商务班级</p>
							</div>
						</div>
						<script>
								$(function(){
									//获取点击事件的对象
									$(".nav li").click(function(){
										//获取要显示或隐藏的对象
										var divShow = $(".content").children('.list');
										//判断当前对象是否被选中,如果没选中的话进入if循环
										if (!$(this).hasClass('selected')) {
											//获取当前对象的索引
											var index = $(this).index();
											//当前对象添加选中样式并且其同胞移除选中样式;
											$(this).addClass('selected').siblings('li').removeClass('selected');
											//索引对应的div块显示
											$(divShow[index]).show();
											//索引对应的div块的同胞隐藏
											$(divShow[index]).siblings('.list').hide();
										}
									});
								});
								
						</script>
					</body>
					</html>
本文来源于网络:查看 >
« 上一篇:一个很简单大方的jquery_弹框_plugin_blockUI
» 下一篇:点击导航栏切换iframe内容
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
相关博文
推荐案例
×添加代码片段