模仿京东tab切换--自创

最新推荐文章于 2022-02-11 19:07:14 发布

吃瓜群众欢乐多

最新推荐文章于 2022-02-11 19:07:14 发布

阅读量1.7k

点赞数 1

文章标签：京东

本文链接：https://blog.csdn.net/sinat_36146776/article/details/52895147

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab效果</title>
	<style type="text/css">
	*{margin:0; padding: 0;}
	.w {  /*版心 提取 */
	    width: 1210px;margin:0 auto;
	}
	.clearfix:before,
	.clearfix:after{
		display: table;
		content: "";
	}
	.clearfix:after{
		clear: both;
	}
	.clearfix{
		zoom:1;
	}
	.mt{
		margin-top: 20px;
	}
	.mt h3{
		float: left;
		height: 34px;
		line-height: 34px;
		position: relative;
		display: block;
		padding-left: 40px;
	}
	.mt h3 i{
		width: 32px;
		height: 25px;
		display: block;
		background: url(images/product_home.png) no-repeat;
		position: absolute;
		left: 0px;
		top: 0;
	}
	.mt .tab{
		float: right;
		list-style-type: none;
		border:1px solid #ededed;
		border-bottom: 0;
	}
	.mt .tab .tab-item{
		float: left;
		height: 34px;
		display: inline;
		position: relative;
	}
	.mt .tab .tab-item i{
		width: 1px;
		height: 14px;
		background-color: #ccc;
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -7px;
	}
	.mt .tab .tab-item a{
		display: block;
		padding: 0 18px;
		height: 34px;
		/*line-height: 34px;*/
		font:400 14px/34px "微软雅黑";
		text-decoration: none;
		text-align: center;
		color:#666;
	}
	.mc{
		border-top:1px solid #c81623;
	}
	.mc .content{
		/*background-color: pink;*/
	}
	.mc .content li{
		background-color: #fff;
		height: 475px;
	}
	.mc .main{
		display: none;
	}
	.mc .main-selected{
		display: block;
	}
	.show{
		display: block;
	}
	.hide{
		display: none;
	}
	.current{
		background-color: #fff;
		border-top:3px solid #c81623;
		border-left: 1px solid #c81623;
		border-right: 1px solid #c81623;
		position: relative;
		z-index: 10;
		margin-left: -1px;
		margin-right: -1px;
		margin-top: -2px;
/*		padding:-1px -1px 0 -1px;*/
	}
	</style>
	<script type="text/javascript">
		window.οnlοad=function(){
			function fn(obj){
				var uls=document.getElementById(obj).getElementsByTagName("ul");
				var litop=uls[0].getElementsByTagName("a");
				var licontent=uls[1].getElementsByTagName("li");
				console.log(litop.length);

				for(var i=0;i<litop.length;i++){
					litop[i].index=i;
					litop[i].οnmοuseοver=function(){
						for(var j=0;j<licontent.length;j++){
							litop[j].className="";
							licontent[j].className="hide";
						}
						this.className="current";
						licontent[this.index].className="show";
					}
				}
			}
			fn("clothes");
			fn("water");
			fn("paper");

		}
	</script>
</head>
<body>
	<div class="w" id="clothes" >
		<div class="mt clearfix">
			<h3><i></i>服装鞋包</h3>
			<ul class="tab">
				<li class="tab-item"><a href="javascript:void(0)" class="current">大牌</a></li>
				<li class="tab-item"><a href="javascript:void(0)">男装</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">女装</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">鞋靴</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">箱包</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">内衣配饰</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">珠宝首饰</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">奢品礼品</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">奢华腕表</a><i></i></li>
			</ul>
		</div>
		<div class="mc clearfix">
			<ul class="content">
				<li class="main main-selected"><img src="images/content1.jpg"></li>
				<li class="main">内容2</li>
				<li class="main">内容3</li>
				<li class="main">内容4</li>
				<li class="main">内容5</li>
				<li class="main">内容6</li>
				<li class="main">内容7</li>
				<li class="main">内容8</li>
				<li class="main">内容9</li>
			</ul>
		</div>
	</div>
	<div class="w" id="water" >
		<div class="mt clearfix">
			<h3><i></i>服装鞋包</h3>
			<ul class="tab">
				<li class="tab-item tab-selected"><a href="javascript:void(0)" class="current">大牌</a></li>
				<li class="tab-item"><a href="javascript:void(0)">男装</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">女装</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">鞋靴</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">箱包</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">内衣配饰</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">珠宝首饰</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">奢品礼品</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">奢华腕表</a><i></i></li>
			</ul>
		</div>
		<div class="mc clearfix">
			<ul class="content">
				<li class="main main-selected"><img src="images/content2.jpg"></li>
				<li class="main">内容2</li>
				<li class="main">内容3</li>
				<li class="main">内容4</li>
				<li class="main">内容5</li>
				<li class="main">内容6</li>
				<li class="main">内容7</li>
				<li class="main">内容8</li>
				<li class="main">内容9</li>
			</ul>
		</div>
	</div>
	<div class="w" id="paper" >
		<div class="mt clearfix">
			<h3><i></i>服装鞋包</h3>
			<ul class="tab">
				<li class="tab-item tab-selected"><a href="javascript:void(0)" class="current">大牌</a></li>
				<li class="tab-item"><a href="javascript:void(0)">男装</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">女装</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">鞋靴</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">箱包</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">内衣配饰</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">珠宝首饰</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">奢品礼品</a><i></i></li>
				<li class="tab-item"><a href="javascript:void(0)">奢华腕表</a><i></i></li>
			</ul>
		</div>
		<div class="mc clearfix">
			<ul class="content">
				<li class="main main-selected"><img src="images/content3.jpg"></li>
				<li class="main">内容2</li>
				<li class="main">内容3</li>
				<li class="main">内容4</li>
				<li class="main">内容5</li>
				<li class="main">内容6</li>
				<li class="main">内容7</li>
				<li class="main">内容8</li>
				<li class="main">内容9</li>
			</ul>
		</div>
	</div>
</body>
</html>

吃瓜群众欢乐多

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
模仿京东tab切换--自创

tab效果 *{margin:0; padding: 0;} .w { /*版心提取 */ width: 1210px;margin:0 auto; } .clearfix:before, .clearfix:after{ display: table; content: ""; } .clearfix:after{ clear: both; } .
复制链接

扫一扫