基於jquery的選項卡效果

我們來先看效果圖如下

 

好了下面來看代碼

代碼如下

複製代碼

<!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 id=”d1″>Dome1</div> <div id=”d2″>Dome2</div> <div id=”d3″>Dome3</div> <div style=”display:block” id=”dom1″> <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″> <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″> <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>