jquery tabs的實現代碼_JQuery特效代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery tabs的實現代碼

jquery tabs的實現代碼

編輯：JQuery特效代碼

關鍵代碼：
代碼如下:
$(function(){
$(".tabs li").eq(0).css("background","#499AFF");
$(".tabs div").eq(0).show();
$(".tabs>ul>li").click(function(i){
$(this).css("background","#499AFF").siblings().css("background","#ffffff");
$(".tabs div").eq($("li").index(this)).show().siblings("div").hide();
return false;
})
})

演示（請“運行代碼”後，刷新一次）：

<!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=gb2312" /> 
<title>jquery tab</title> 
<script language="javascript" type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$(function(){ 
    $(".tabs li").eq(0).css("background","#499AFF"); 
    $(".tabs div").eq(0).show(); 
    $(".tabs>ul>li").click(function(i){ 
        $(this).css("background","#499AFF").siblings().css("background","#ffffff"); 
        $(".tabs div").eq($("li").index(this)).show().siblings("div").hide(); 
        return false; 
    }) 
}) 
</script> 
<style type="text/css"> 
*{ 
    padding:0; 
    margin:0; 
} 
body{ 
    margin-left:100px; 
    margin-top:100px; 
} 
.tabs{ 
    width:250px; 
    height:300px; 
} 
.tabs ul{ 
    width:250px; 
    height:28px; 
} 
.tabs ul li{ 
    float:left; 
    width:50px; 
    height:28px; 
    color:white; 
    line-height:28px; 
    margin-right:10px; 
    text-align:center; 
} 
.tabs ul li a:link,.tabs ul li a:visited{ 
    color:black; 
} 
.tabs div{ 
    border:1px solid #499AFF; 
    display:none; 
} 
.tabs div a{ 
    display:block; 
    width:250px; 
    text-decoration:none; 
    margin-top:5px; 
    padding-left:10px; 
} 
a:link,a:visited{ 
    color:blue; 
    font-size:12px; 
    text-decoration:none; 
} 
a:hover{ 
    color:red; 
} 
li{ 
    list-style:none; 
} 
</style> 
</head> 
<body> 
<div class="tabs"> 
    <ul> 
    <li><a href="#" target="_blank"></a></li> 
<li><a href="#" target="_blank">腳本jb51</a></li> 
</ul> 
<div> 
    <a href="http://www.poluoluo.com/" target="_blank"></a> 
<a href="http://www.poluoluo.com/" target="_blank"></a> 
<a href="http://www.poluoluo.com/" target="_blank"></a> 
<a href="http://www.poluoluo.com/" target="_blank"></a> 
<a href="http://www.poluoluo.com/" target="_blank"></a> 
<a href="http://www.poluoluo.com/" target="_blank"></a> 
<a href="http://www.poluoluo.com/" target="_blank"></a> 
<a href="http://www.poluoluo.com/" target="_blank"></a> 
</div> 
<div> 
    <a href="http://www.poluoluo.com/" target="_blank">腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com</a> 
<a href="http://www.poluoluo.com/" target="_blank">腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com</a> 
<a href="http://www.poluoluo.com/" target="_blank">腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com</a> 
<a href="http://www.poluoluo.com/" target="_blank">腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com</a> 
<a href="http://www.poluoluo.com/" target="_blank">腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com</a> 
<a href="http://www.poluoluo.com/" target="_blank">腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com</a> 
<a href="http://www.poluoluo.com/" target="_blank">腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com</a> 
<a href="http://www.poluoluo.com/" target="_blank">腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com腳本poluoluo.com</a> 
</div> 
</div> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:jquery input checked全選與反選1.3.2的版本
下一頁:javascript 歷史記錄經常用於產品最近歷史浏覽查看

JQuery特效代碼

treepanel動態加載數據實現代碼: . 代碼如下: var tree = new Ext.tree.TreePanel({ region
jQuery 學習第五課 Ajax 使用說明: jQuery提供了若干個ajax函數，他們大同小異，只是為了處理不同類型的數據而分開來。最簡單的是g
js和jquery中循環的退出和繼續下一個循環: 作為水貨，就是學會了1+1=3也要記錄一下！錯了，是2學習記錄：js中的for(var i=1;i&

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章