js的eq获取到元素的下标数值

最新推荐文章于 2023-08-19 11:52:53 发布

Blackmarmba

最新推荐文章于 2023-08-19 11:52:53 发布

阅读量1k

点赞数

分类专栏： Html JS 文章标签： js jquery html

本文链接：https://blog.csdn.net/Blackmarmba/article/details/46352523

版权

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	</head>
	<style type="text/css">
	*{ margin:0px; padding:0px; list-style-type:none;}
	.con{ width:745px; height:500px; border:#09F solid 1px ; margin:0 auto;}
	.con .nav{ width:745px; height:40px;}
	.nav ul{ background:#6C6C6C;}
	.nav ul li{ padding:0 16px 0 16px; float:left; height:40px; line-height:40px;}
	.nav .sel{ border-bottom:#F00 solid 1px; font-weight:bold; color:#666}
	.content{ width:745px; height:460px; }
	.content .list{ text-align:center; display:none;}
	.content .show{ display:block;}
	</style>

	<body>
	<div class="con">
	<div class="nav">
	<ul id="header">
	<li class="sel">首页</li>
	<li>新闻</li>
	<li>视频</li>
	<li>财经</li>
	<li>娱乐</li>
	<li>体育</li>
	</ul>
	</div>
	<div class="content">
	<div class="list show"><img src="image/1.jpg" width="742" height="456" /></div>
	<div class="list"><img src="image/2.png" width="742" height="456" /></div>
	<div class="list"><img src="image/3.png" width="742" height="456"/></div>
	</div>
	</div>
	<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
	<script type="text/javascript">

	$("#header").find("li").hover(function(){
	$(this).addClass("sel").siblings().removeClass("sel");

	$(".list").hide().eq($("li").index($(this))).show();
	})






	</script>
	</body>
	</html>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	</head>
	<style type="text/css">
	*{ margin:0px; padding:0px; list-style-type:none;}
	.con{ width:745px; height:500px; border:#09F solid 1px ; margin:0 auto;}
	.con .nav{ width:745px; height:40px;}
	.nav ul{ background:#6C6C6C;}
	.nav ul li{ padding:0 16px 0 16px; float:left; height:40px; line-height:40px;}
	.nav .sel{ border-bottom:#F00 solid 1px; font-weight:bold; color:#666}
	.content{ width:745px; height:460px; }
	.content .list{ text-align:center; display:none;}
	.content .show{ display:block;}
	</style>

	<body>
	<div class="con">
	<div class="nav">
	<ul id="header">
	<li class="sel">首页</li>
	<li>新闻</li>
	<li>视频</li>
	<li>财经</li>
	<li>娱乐</li>
	<li>体育</li>
	</ul>
	</div>
	<div class="content">
	<div class="list show"><img src="image/1.jpg" width="742" height="456" /></div>
	<div class="list"><img src="image/2.png" width="742" height="456" /></div>
	<div class="list"><img src="image/3.png" width="742" height="456"/></div>
	</div>
	</div>
	<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
	<script type="text/javascript">

	$("#header").find("li").hover(function(){
	$(this).addClass("sel").siblings().removeClass("sel");

	$(".list").hide().eq($("li").index($(this))).show();
	})






	</script>
	</body>
	</html>