仿京东选项卡效果

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/scarsun/article/details/81315427
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 14px;
			}
			ul li{
				list-style:none;	
			}
			#menu{
				width: 552px;
				line-height: 30px;
				overflow: hidden;
				background:#eee;
			}
			#menu li{
				float: left;
				width: 90px;
				border-left: 1px solid #eee;
				border-right: 1px solid #eee;
				border-top: 2px solid #eee;
				text-align: center;
				cursor: pointer;
			}
			#menu .active{
				border-left-color: #ccc;
				border-right-color: #ccc;
				border-top-color: blue;
				cursor: pointer;
				background:#fff;
			}
			#content{
				width: 552px;
			}
			#content>div {
				display: none;
				padding: 10px;
				overflow: hidden;
			}
			#content>div img{
				float: left;
				width:255px ;
				height: 96px;
				margin-right: 10px;
			}
			#content>div .title{
				padding: 2px 0;
				border-bottom: 1px solid #eee;
			}
			#content .active{
				display:block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul id="menu">
				<li class="active">生</li>
				<li>而</li>
				<li>无</li>
				<li>畏</li>
				<li>必</li>
				<li>胜</li>
			</ul>
			<div id="content">
				<div class="active"><img src="img/1.jpg" alt="">
					<div class="title">QGHappy</div>
					<ul>
						<li>cat</li>
						<li>fly</li>
						<li>hurt</li>
						<li>yang</li>
					</ul>
				</div>
				<div><img src="img/2.png" alt="">
					<div class="title">AS仙阁</div>
					<ul>
						<li>辰鬼</li>
						<li>神男</li>
						<li>小羽</li>
						<li>无痕</li>
					</ul>
				</div>
				<div><img src="img/3.jpg" alt="">
					<div class="title">estar</div>
					<ul>
						<li>小渝</li>
						<li>伪装</li>
						<li>橘子</li>
						<li>星辰</li>
					</ul>
				</div>
				<div><img src="img/4.jpeg" alt="">
					<div class="title">AG超玩会</div>
					<ul>
						<li>梦泪</li>
						<li>Vv</li>
						<li>流苏</li>
						<li>月痕</li>
					</ul>
				</div>
				<div><img src="img/5.jpg" alt="">
					<div class="title">JC</div>
					<ul>
						<li>怼怼</li>
						<li>纵情</li>
						<li>初拥</li>
						<li>倾城</li>
					</ul>
				</div>
				<div><img src="img/6.jpg" alt="">
					<div class="title">XQ</div>
					<ul>
						<li>AT</li>
						<li>Fangz</li>
						<li>7Kill</li>
						<li>Easy</li>
					</ul>
				</div>
			</div>
		</div>
		<script>
			var menu = document.getElementById('menu');
			var menuLi = Array.from( menu.children );
			var content = document.getElementById( 'content');
			var contentDiv = Array.from(content.children);

			menuLi.forEach((v , k) => {
			   v.onclick = function () {

			       //切换LI
				   menuLi.forEach(n => n.className = '');
				   this.className = 'active';
			       //切换DIV
				   contentDiv.forEach( n => n.style.display = 'none');
			       contentDiv[k].style.display = 'block';
			   };
			});
		</script>
	</body>
</html>

展开阅读全文

没有更多推荐了,返回首页