jquery tab栏

最新推荐文章于 2024-03-26 16:05:56 发布

黄大仙No.1

最新推荐文章于 2024-03-26 16:05:56 发布

阅读量183

点赞数

分类专栏： jQuery 文章标签： js css html jquery javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/108237657

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-3.5.1.min.js"></script>	<!--导入jquery-->
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.wrapper {
				box-sizing: content-box;
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: transparent;
			}

			.wrapper {
				/*width: 700px;*/
				width: 45%;
				display: flex;
				flex-direction: row;
			}

			.wrapper .left {
				/*flex: 1;*/
				width: 20%;
				border: 1px solid red;
			}

			.wrapper .left li {
				border: 1px solid red;
			}

			.wrapper .left li a {
				display: block;
				width: 100%;
				height: 48px;
			}

			.wrapper #content {
				width: 80%;
				/*border: 1px solid red;*/
			}

			.wrapper #content div {
				display: none;
			}

			.wrapper #content div a img {
				width: 100%;
				vertical-align: top; /*去除缝隙*/
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<ul class="left">
				<li>
					<a href="">1</a>
				</li>
				<li>
					<a href="">2</a>
				</li>
				<li>
					<a href="">3</a>
				</li>
				<li>
					<a href="">4</a>
				</li>
				<li>
					<a href="">5</a>
				</li>
				<li>
					<a href="">6</a>
				</li>
				<li>
					<a href="">7</a>
				</li>
				<li>
					<a href="">8</a>
				</li>
				<li>
					<a href="">9</a>
				</li>
			</ul>
			<div id="content">
				<div>
					<a href="">
						<img src="../pictures/2015.01.09-228.jpeg" alt="">
					</a>
				</div>
				<div>
					<a href="">
						<img src="../pictures/2015.02.04-119.jpeg" alt="">
					</a>
				</div>
				<div>
					<a href="">
						<img src="../pictures/2015.02.03-1233.jpg" alt="">
					</a>
				</div>
				<div>
					<a href="">
						<img src="../pictures/2015.02.06-1364.jpg" alt="">
					</a>
				</div>
				<div>
					<a href="">
						<img src="../pictures/2015.01.08-551.png" alt="">
					</a>
				</div>
				<div>
					<a href="">
						<img src="../pictures/2015.02.06-1459.jpg" alt="">
					</a>
				</div>
				<div>
					<a href="">
						<img src="../pictures/2015.02.06-1459.jpg" alt="">
					</a>
				</div>
				<div>
					<a href="">
						<img src="../pictures/2015.02.02-1636.jpg" alt="">
					</a>
				</div>
				<div>
					<a href="">
						<img src="../pictures/2015.02.14-1838.jpg" alt="">
					</a>
				</div>
			</div>
		</div>
	</body>
	<script>
        $(function () {
            $('.left li').mouseover(function () {
                $(this).css('backgroundColor','red')
                $('#content div').eq($(this).index()).show()
            })
            $('.left li').mouseleave(function () {
                $(this).css('backgroundColor','')
                $('#content div').eq($(this).index()).hide()
            })
        })
	</script>
</html>