(难度:15%)带轮播的简单的tab

最新推荐文章于 2023-12-06 14:22:56 发布

木木钧

最新推荐文章于 2023-12-06 14:22:56 发布

阅读量577

点赞数

本文链接：https://blog.csdn.net/lj654548718/article/details/28090117

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

没用任何图片实现的tab

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<style>
		body{
			margin: 60px auto;
			width: 600px;
			text-align: left;
			background: #ffe;
		}
		.header{
		}
		.header a{
			float: left;
			width: 80px;
			padding:0 10px;
			text-decoration: none;
			color: white;
			background: black;
			color: #fff;
			line-height: 30px;
			margin-right: -20px;
			opacity: 0.7;
			/*这三行很牛逼...*/
			height: 0px;
    		        border-right: 30px solid white;
    		        border-bottom: 30px solid orange;
		}
		.content{
			border-top:3px solid gray;
			margin-top: -6px;
			background: white;
			padding: 25px;
		}
		.content h2{
			border-left: 5px solid #0cf;
			padding: 15px;
		}
		.content p{
			border-left: 5px solid #B1F3A5;
			padding: 15px;
		}
		
	</style>
</head>
<body>
<div class="tabs">
	<div class="header">
		<a href="#">ONE</a>
		<a href="#">TWO</a>
		<a href="#">THREE</a>
		<a href="#">FOUR</a>
	</div>
	<br><br>
	<div>
		<h2>AAa</h2>
		<p>adasasdasdasddasd</p>
	</div>
	<div>
		<h2>asdsdsadAAa</h2>
		<p>adasasdasdasadadazzsdadasddasd</p>
	</div>
	<div>
		<h2>vvvvvAa</h2>
		<p>adasasdasdasdasdasdasdadasdasd</p>
	</div>
	<div>
		<h2>zzzddd</h2>
		<p>adasasdasdasdddasdadasdasd</p>
	</div>
</div>
</body>
<script type="text/javascript">
	var $content=$(".tabs div:not('.header')");
	var $header=$(".tabs div:first a");
	var cur=0;
	var timer;
	function play_tab(){
		cur++;
		cur%=4;
		$header.css("border-bottom-color","orange");
		$('#tab'+cur).css("border-bottom-color","gray");
		$content.css("display","none");
		$('._tab'+cur).fadeIn();
	}
	jQuery(function(){
		
		var i;

		i=0;
		//用for循环无效
		$content.each(function(){
			$(this).addClass("_tab"+i).addClass("content");
			i++;
		})
		$content.css("display","none");
		$("._tab0").fadeIn();
		i=0;
		$header.each(function(){
			$(this).attr("id","tab"+i);
			if (i==0){
				$(this).css("border-bottom-color","gray");
			}
			i++;
		})
		$header
			.click(function(e){
				e.preventDefault();
			})
			.mouseover(function(){
				clearInterval(timer)
				$header.css("border-bottom-color","orange");
				$(this).css("border-bottom-color","gray");
				$(this).animate({"width":"100px"},250);
				$content.css("display","none");
				$("._"+$(this).attr("id")).fadeIn();
			})
			.mouseleave(function(){
				timer=setInterval("play_tab()", 2000);
				$(this).animate({"width":"80px"},250);
				cur=Number($(this).attr('id')[3]);
			});
		timer=setInterval("play_tab()", 2000);
	})
</script>
</html>

效果如下: