<!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
posted on 2011-11-07 19:01 xiaolugoo 阅读( ...) 评论( ...) 编辑 收藏转载于:https://www.cnblogs.com/jianker/archive/2011/11/07/2240192.html
相关资源：Bootstrap超酷Tabs选项卡美化特效