怎么实现鼠标放到热卖上，会切换到另一个页？会切换到图二的效果？

sinat_16500489 2015-04-26 08:58:21

...全文

102 2 打赏收藏举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

slwsss 2015-04-27

打赏
举报

http://www.17sucai.com/pins/demoshow/308

圆㺭 2015-04-27

打赏
举报


<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			position: relative;
			border: 1px solid blue
		}
		ul{
			margin: 0px;
			padding: 0px;
			position: relative;
			height: 10%;
		}
		.nav{
			display: inline-block;
			width: 50%;
			float: left;
			text-align: center;
			cursor:pointer;
		}
		.detail{
			position: absolute;
			bottom:0px;
			left:0px;
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 90%;
			background: #ccc;
			visibility: hidden;
		}
		.current{
			visibility: visible;
		}
		</style>
		
	</head>
	<body>
		<div id="box">
			<ul>
				<li id="class_1" class="nav current">人气</li>
				<li id="class_2" class="nav">热卖</li>
			</ul>
			<div id="detail_class_1" class="detail current">人气人气人气人气人气人气人气</div>
			<div id="detail_class_2" class="detail">热卖热卖热卖热卖热卖热卖热卖</div>
		</div>
		 <script type="text/javascript" src="jquery-1.11.2.js"></script>
		<script type="text/javascript">
		$(".nav").click(function(){
			if (!$(this).hasClass("current")){
				$(this).addClass("current").siblings().removeClass("current");	
				$("#detail_"+this.id).addClass("current").siblings().removeClass("current")			
			}
		});
		</script>
	</body>
</html>