tab切换的jq js 方法示例最实用

最新推荐文章于 2024-07-29 18:19:14 发布

十月在冬天

最新推荐文章于 2024-07-29 18:19:14 发布

阅读量175

点赞数 1

本文链接：https://blog.csdn.net/Payne_liu/article/details/97389878

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab 切换</title>
		<style>
			*{
                margin: 0;
                padding: 0;
            }
            .tab{
                width: 600px;
                height: 500px;
                border: 4px solid orange;
                margin: 30px auto;
                position: relative;
                float: left;
                margin-right:30px ;
            }
            .tab ul li{
                width: 200px;
                height: 50px;
                float: left;
                list-style: none;
                line-height: 50px;
                color: #fff;
                text-align: center;
                font-size: 30px;
            }
            .tab .con{
                width: 580px;
                height: 420px;
                position: absolute;
                left: 10px;
                top: 70px;
                display: none;
            }
        </style>
	</head>

	<body>
		<div class="tab" id="tab">
			<span class="active">工作日</span>
			<span>休息日</span>
			<div class="tabdiv" style="position: absolute;bottom: 0;">
				<div class="tabpane">
					工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日工作日
				</div>
				<div class="tabpane" style="display: none;">
					休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日休息日
				</div>
			</div>
		</div>
		<div class="tab">
			<ul>
				<li style="background: blueviolet;">新闻</li>
				<li style="background: olivedrab;">体育</li>
				<li style="background: orangered;">娱乐</li>
			</ul>
			<div class="con" style="background: blueviolet;display: block;">新闻jq复用型tab切换</div>
			<div class="con" style="background: olivedrab;">体育jq复用型tab切换</div>
			<div class="con" style="background: orangered;">娱乐jq复用型tab切换</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			//js tab切换方法
			var span = document.querySelectorAll('#tab span'), //css选择器
				div = document.querySelectorAll('.tabpane');
			for (var i = 0; i < span.length; i++) { //循环span标签
				span[i].idx = i;
				//给span一个自定义的idx属性，将I赋值进去，因为下边的循环不能直接拿到这个循环的i
				span[i].onclick = function() {
					for (var j = 0; j < div.length; j++) { //循环div标签
						div[j].style.display = 'none'; //每次点击都先隐藏掉div，并移除class
						span[j].classList.remove('active');
					}
					div[this.idx].style.display = 'block'; //给当前div显示出来
					this.classList.add('active'); //增加class
				}
			}

			//jq 方法
			$(".tab ul li").click(function() {
				//          获得移入的li的序号
				var c = $(this).index();
				//          让c号con显示,兄弟con隐藏
				$(this).parents('.tab').find('.con').eq(c).show().siblings('.con').hide();
			})
		</script>
	</body>
</html>