$(document).ready(function(){
// 找到所有的标签
$("li").each(function(index){
//每一个包装li的jquery对象都会执行function
//index是当前执行这个function代码对li对应在所有li组成的数组中的索引值
//有了index的值后，就可以找到当前标签对应的内容
$(this).mouseover(function(){
// 将原来现实的内容区域进行隐藏
$("div.contentin").removeClass("contentin")
// 当前标签所对应的内容区域显示出来
$("div").eq(index).addClass("contentin")
})
})
})
=================================================================
<!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/htmlcharset=utf-8" />
<title>jquery实例 标签效果页</title>
<style>
ul,li{
margin:0
padding:0
/*去除列表原点*/
list-style:none
}
li{
float:left
background-color:pink
color:white
padding:5px
margin-right:2px
}
div{
/*去除li里边float:left属性*/
clear:left
background-color:pink
color:white
width:200px
height:100px
padding:10px
/*div隐藏*/
display:none
}
div.contentin{
display:block
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 找到所有的标签
$("li").each(function(index){
//每一个包装li的jquery对象都会执行function
//index是当前执行这个function代码对li对应在所有li组成的数组中的索引值
//有了index的值后，就可以找到当前标签对应的内容
$(this).mouseover(function(){
// 将原来现实的内容区域进行隐藏
$("div.contentin").removeClass("contentin")
// 当前标签所对应的内容区域显示出来
$("div").eq(index).addClass("contentin")
})
})
})
</script>
</head>
<ul>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<body>
<div class="contentin">我是内容1</div>
<div>我是内容2</div>
<div>我是内容3</div>
</body>
</html>
这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟，这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃，用到setTimeout函数，主要用到已下的事件1
$().each(function(){})
这个是个非常重要的遍历所有标签的好办法
2
mouseover事件，
还有就是关键的css样式编写，控制显示的样式，
复制代码
代码如下:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.0
Transitional//EN">
<HTML>
<HEAD>
<TITLE>tab
</TITLE>
<link
rel="stylesheet"
type="text/css"
href="css/tab.css">
<script
type="text/javascript"
src="js/jquery-1.4.2.js"></script>
<script
type="text/javascript"
src="js/tab.js"></script>
</HEAD>
<BODY>
<ul
id="ularea">
<li
class="listli">标签1</li>
<li
>标签2</li>
<li
>标签3</li>
</ul>
<div
class="divarea">内容1</div>
<div>内容2</div>
<div>内容3</div>
</BODY>
</HTML>
接下来就是控制样式的css
复制代码
代码如下:
ul
,li
{
margin:0px
padding:0px
list-style:none
}
li
{
float:left
background-color:#66CC00
margin-right:2px
//这个是设置标签之间的间距
padding:5px
border:1px
solid
white
height:20px
color:white
}
.listli
{
background-color:#663333
border:1px
solid
#663333
}
div
{
clear:left
width:300px
height:100px
background-color:#663333
border-top:0px
color:white
display:none
}
.divarea
{
display:block
}
下来就是编写控制滑动的js
复制代码
代码如下:
//定义全局变量
var
timeout
$(document).ready(function(){
//找到所有的li标签
$("li").each(function(index){
$(this).mouseover(function(){
//滑动门都要设置一个延迟时间，避免用户疯狂移动鼠标，导致服务器崩溃，这个很重要
timeout
=setTimeout(function(){
$("div.divarea").removeClass("divarea")
$("li.listli").removeClass("listli")
//
$("div").eq(index).addClass("divarea")
//另一种写法是:$(div:eq(index)).addClass("divarea")
$("div:eq("+index+")").addClass("divarea")
$("li").eq(index).addClass("listli")
},
320)
$(this).mouseout(function(){
clearTimeout(timeout)
})
})
})
})
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）