jquery tab栏

在这里插入图片描述

html"><!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="html" title=js>js/jquery-3.5.1.min.html" title=js>js">javascript"></script>	<!--导入jquery-->
		<style>html" title=css>css">
			* {
				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>javascript">
        $(function () {
            $('.left li').mouseover(function () {
                $(this).html" title=css>css('backgroundColor','red')
                $('#content div').eq($(this).index()).show()
            })
            $('.left li').mouseleave(function () {
                $(this).html" title=css>css('backgroundColor','')
                $('#content div').eq($(this).index()).hide()
            })
        })
	</script>
</html>

jquery tab栏

相关文章

去耦电容的容值计算和布局布线

jquery css方法的三种使用,调用时可以传入对象

沉金板与镀金板的区别

bin文件格式分析

jquery 操作类

jquery 实现淘宝tab栏,相关jquery代码仅三行!!!

CArray的应用

VC++中LogFont设置字体