jquery实现tab栏切换案例

最新推荐文章于 2022-10-02 14:55:22 发布

是小王啊i

最新推荐文章于 2022-10-02 14:55:22 发布

阅读量474

点赞数

文章标签： js css javascript html

本文链接：https://blog.csdn.net/qq_45378970/article/details/108903175

版权

jquery 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 450px;
				height: 450px;
				margin: 0 auto;
			}
			#one{
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
			#one li{
				list-style: none;
				width: 75px;
				height: 45px;
				line-height: 45px;
				border: 1px solid red;
				text-align: center;
			}
			#two{
				width: 100%;
				height: 200px;
			}
			#two li{
				list-style: none;
				width: 100%;
				height: 100%;
				border: 1px solid lightgray;
				display: none;
			}
			#two .current{
				display: block;
			}
			.aa{
				background-color: red;
			}
		</style>
		<script src="./jquery-3.3.1.js"></script>
	</head>
	<body>
		<div class="box">
			<ul id="one">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
			<ul id="two">
				<li class="current"></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script src="jquery-3.3.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#one').delegate('li','click',function(){
					var index=$(this).index();
					// console.log(index);
					$(this).addClass('aa').siblings().removeClass('aa');
					var html=$(this).html();
					$('#two li').eq(index).html(html);
					$('#two li').eq(index).addClass('current').siblings().removeClass('current');
				})
			})
		</script>
	</body>
</html>

是小王啊i

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery实现tab栏切换案例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 450px; height: 450px; margin: 0 auto; }
复制链接

扫一扫

专栏目录