JQ选项卡切换

最新推荐文章于 2023-07-28 14:46:41 发布

王小玖

最新推荐文章于 2023-07-28 14:46:41 发布

阅读量640

点赞数

分类专栏： dome 文章标签： css jquery html

本文链接：https://blog.csdn.net/weixin_46019220/article/details/119486840

版权

dome 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js "></script>
	</head>
	<style>

		.tab-menu ul {
			list-style: none;
			overflow: hidden;
		}

		.tab-menu li {
			display: block;
			width: 30%;
			float: left;
			border: 1px solid blue;
		}

		.tab-box div {
			display: none;
		}

		.tab-box div:first-Child {
			display: block;
		}
	</style>
	<script>
		$().ready(function() {
			$(".tab-menu li").click(function() {
				var _index = $(this).index();
				$(".tab-box>div").eq(_index).show().siblings().hide();
			});
		});
	</script>
	<body>
			<div class="tab-menu">
				<ul>
					<li>111</li>
					<li>222</li>
					<li>333</li>
				</ul>
			</div>
			<div class="tab-box">
				<div>111111111111111111111111111111111111111111111111111</div>
				<div>222222222222222222222222222222222222222222222222222</div>
				<div>333333333333333333333333333333333333333333333333333</div>
			</div>
	</body>
</html>

基本上没有样式，想要什么样式自己去写

下方为左滑切换选项卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左滑选项卡</title>
		<style type="text/css">
			.box2 {
				width:500px;
				margin:0 auto;
				position:relative;
				overflow:hidden;
			}
			.bon {
				width:1000%;
			}
			.bon ul li {
				float:left;
				width:500px;
				padding-top:14px;
			}
			.bon ul li ul li:first-child {
				padding-top:5px;
			}
		</style>
	</head>
	<body>
		
		<div class="box">
		    <ul class="header">
		        <li class="head">111</li>
		        <li class="zhong">222</li>
		        <li class="last">333</li>
		    </ul>
		</div>
		<div class="box2">
		    <div class="bon">
		        <ul>
		            <li>
		                <ul>
		                    <li>11111111111111111111111111111111111111111111</li>
		                    <li>11111111111111111111111111111111111111111111</li>
							<li>11111111111111111111111111111111111111111111</li>
		                </ul>
		            </li>
		            <li>
		                <ul>
		                    <li>2222222222222222222222222222222222222222222</li>
		                    <li>2222222222222222222222222222222222222222222</li>
							<li>2222222222222222222222222222222222222222222</li>
		                </ul>
		            </li>
		            <li>
		                <ul>
		                    <li>3333333333333333333333333333333333333333333</li>
		                    <li>3333333333333333333333333333333333333333333</li>
							<li>3333333333333333333333333333333333333333333</li>
		                </ul>
		            </li>
		        </ul>
		    </div>
		</div>
		
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript">
			$(".box ul li").click(function() {
			    var index = $(this).index()
			    var w = $(".box2 .bon ul li").width()
			    $(".bon").stop().animate({ 
					// 每次滑动的距离是li的宽度
			        "marginLeft": -w * index
			    })
			})
		</script>
		
	</body>
</html>

王小玖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQ选项卡切换

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>选项卡</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js "></script> </head> <style> .tab-menu ul { list-sty.
复制链接

扫一扫