选项卡（jQuery）

最新推荐文章于 2019-06-14 16:49:37 发布

W_SSNY

最新推荐文章于 2019-06-14 16:49:37 发布

阅读量221

点赞数

本文链接：https://blog.csdn.net/W_SSNY/article/details/81979630

版权

当鼠标点击图一图二图三图四时，其余内容不变，下方框中分别显示四个不同的图片：

切记引入jquery-1.7.min.js包

index.css：

*{
	padding: 0;
	margin: 0;
}
li{
	list-style:none;
}
.content{
	width: 500px;
	height: 500px;
	border:1px solid #ccc;
	margin: 0 auto;
	margin-top: 20px;
}
.head{
	width: 480px;
	height: 50px;
	margin: 0 auto;
	margin-top: 10px;
	background: #f2f2f2;
}
ul{
	width: 480px;
}
.head ul li{
	width: 85px;
	float:left;
	margin-left: 24px;
	line-height: 50px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
.t-img{
	width: 478px;
	height: 430px;
	margin: 0 auto;
    border:1px solid #f2f2f2;
}
.t-img img{
	width:100%;
	height: 100%;
}

.head li.selected{
	color: white;
	background: #6D84B4;
}
.head li.hover{
	background: #DFDFDF;
}
.hide{
	display: none;
}

index.html：（jquery代码也在其中）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<link rel="stylesheet" href="css/index.css">
	<script src="js/jquery-1.7.min.js"></script>
	<script type="text/javascript">
	$(function(){
        var $div_li = $("div.content ul li");
        	$div_li.click(function(){
        		$(this).addClass("selected")
        		    .siblings().removeClass('selected');
        	var index = $div_li.index(this);
        	$("div.t-img > img")
        	    .eq(index).show()
        	    .siblings().hide();
        	}).hover(function(){
        		$(this).addClass('hover'); 

        	},function(){
                $(this).removeClass('hover')
        	})
        })
	</script>
</head>
<body>
	<div class='content'>
		<div class="head">
			<ul>
				<li class="selected">图1</li>
				<li>图2</li>
				<li>图3</li>
				<li>图4</li>
			</ul>
		</div>
		<div class="t-img">
			<img src="images/d6.jpg">
			<img class="hide" src="images/d7.jpg">
			<img class="hide" src="images/d8.jpg">
			<img class="hide" src="images/d9.jpg">
		</div>
	</div>
</body>
</html>