<!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>jQuery选项卡</title>
<script type="text/javascript" src="jquery-1.6.2.min.js" ></script>
<script type="text/javascript">
$(function(){
//1
$("#d1").hover(function(){ //采用的是鼠标联合事件
$("#d1").css("backgroundColor","#FD52AA"); //设置卡键的背景颜色
$("#d1").css("color","white"); //设置卡键上的文字颜色
$("div[id^='dom']").css("display","none");
$("#dom1").css("display","block");
},function(){
$("#d1").css("backgroundColor","#666");
});
//2
$("#d2").hover(function(){ //采用的是鼠标联合事件
$("#d1").css("backgroundColor","#666");
$("#d2").css("backgroundColor","#FD52AA"); //设置卡键的背景颜色
$("#d2").css("color","white"); //设置卡键上的文字颜色
$("div[id^='dom']").css("display","none");
$("#dom2").css("display","block");
},function(){
$("#d2").css("backgroundColor","#666");
});
//3
$("#d3").hover(function(){ //采用的是鼠标联合事件
$("#d3").css("backgroundColor","#FD52AA"); //设置卡键的背景颜色
$("#d3").css("color","white"); //设置卡键上的文字颜色
$("div[id^='dom']").css("display","none");
$("#dom3").css("display","block");
},function(){
$("#d3").css("backgroundColor","#666"); //设置卡键的背景颜色
});
//选项卡特效
$("li").hover(function(){
$(this).css("border","1px dashed #FD52AA");
},function(){
$(this).css("border","0px outset #000");
})
//c1
$("#dom1").mouseover(function(){
$("#d3").css("backgroundColor","#666");
$("#d2").css("backgroundColor","#666");
$("#d1").css("backgroundColor","#FD52AA"); //设置卡键的背景颜色
})
//c2
$("#dom2").mouseover(function(){
$("#d1").css("backgroundColor","#666");
$("#d3").css("backgroundColor","#666");
$("#d2").css("backgroundColor","#FD52AA"); //设置卡键的背景颜色
})
//3
$("#dom3").mouseover(function(){
$("#d1").css("backgroundColor","#666");
$("#d2").css("backgroundColor","#666");
$("#d3").css("backgroundColor","#FD52AA"); //设置卡键的背景颜色
})
});
</script>
<style type="text/css" >
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #333333;
text-align:center;
}
#home{
width:400px;
height:400px;
}
.nav{
width:80px;
height:20px;
float:left;
font-size:12px;
text-align:center;
border:1px solid #000;
margin-left:1px;
background:#666;
}
.xxk{
margin:2px;
width:250px;
height:150px;
border:1px solid #000;
color:#CCC;
font-size:12px;
float:left;
display:none;
text-align:left;
padding:20px;
line-height:20px;
background:#302F2F;
}
li{
list-style:none;
}
</style>
</head>
<body>
<div id="home">
<div class="nav" id="d1">Dome1</div>
<div class="nav" id="d2">Dome2</div>
<div class="nav" id="d3">Dome3</div>
<div style="display:block" id="dom1" class="xxk">
<li>新闻1内容~~</li>
<li>新闻1内容~~</li>
<li>新闻1内容~~</li>
<li>新闻1内容~~</li>
<li>新闻1内容~~</li>
<li>新闻1内容~~</li>
<li>广告1内容~~</li>
</div>
<div id="dom2" class="xxk">
<li>广告1内容~~</li>
<li>广告1内容~~</li>
<li>广告1内容~~</li>
<li>广告1内容~~</li>
<li>广告1内容~~</li>
<li>广告1内容~~</li>
<li>广告1内容~~</li>
</div>
<div id="dom3" class="xxk">
<li>节目1内容~~</li>
<li>节目1内容~~</li>
<li>节目1内容~~</li>
<li>节目1内容~~</li>
<li>节目1内容~~</li>
<li>节目1内容~~</li>
<li>节目1内容~~</li>
</div>
</div>
</body>
</html>
转载 北海情书博客 http://www.php0.net
浙公网安备 33010602011771号