這是一個(gè)看上去未經(jīng)美化的簡(jiǎn)潔TAB選項(xiàng)卡，觸發(fā)類的動(dòng)作都是完整的，有興趣的自己進(jìn)行美化，美化漂亮了還是相當(dāng)不錯(cuò)的，代碼簡(jiǎn)潔，對(duì)學(xué)習(xí)參考比較不錯(cuò)，使用了jQuery插件。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-show-tab-plug-style-codes/

具體代碼如下：

<!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>未經(jīng)美化的簡(jiǎn)潔TAB</title>
<style>
body {font:normal 12px/20px simsun; margin:0 auto; padding:0;} 
* {margin: 0px; padding: 0px;}
h4{font-size:14px;}
h5{font-size:12px;}
img {border:none;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{text-decoration:underline; color:#ffae00;}
#tab{width:240px; margin:0 auto; text-align:center;}
.menu{height:35px; line-height:32px; padding-top:1px;}
.menu a{display:inline-block; height:35px; line-height:35px; width:116px; text-align:center; font-size:20px; color:#999999; font-weight:bold;}
.menu a:hover, .menu a.on{color:#d33b55; text-decoration:none;}
.cnt{border:1px solid #999999; width:240px; height:100px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $(".menu a").each(function(i){
  $(this).click(function(){
   $(".menu a").removeClass("on").eq(i).addClass("on");
   $(".cnt").hide().eq(i).show();
   return false; //防止a跳轉(zhuǎn)；
  })
 })
 });
</script>
</head>
<body>
<div id="tab">
 <div class="menu">
 <a href="#" class="on">ASP源碼</a>
 <a href="#">Java源碼</a>
 </div>
 <div class="cnt">
 <ul>
 <li>ASP源碼1</li>
 <li>ASP源碼2</li>
 <li>ASP源碼3</li>
 </ul>
 </div>
 <div class="cnt" style="display:none;">
 <ul>
 <li>Java源碼1</li>
 <li>Java源碼2</li>
 <li>Java源碼3</li>
 </ul>
 </div>
 </div>
</body>
</html>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: