熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jquery實現的tab切換效果

2013-11-15 12:17:09  來源: JSP教程 

  以下是源代碼:

   <!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" " <html xmlns=" <head> <title>div切換柯樂義</title> <script type="text/javascript" src=" <!演示內容開始> <style type="text/css"> *{margin:;padding:;liststyletype:none;} aimg{border:;} body{background:#eee;height:%;font:normal normal px/px "Microsoft yahei" Arial;paddingbottom:px;} a{color:#;textdecoration:none;} a:hover{color:#;textdecoration:none;} #title{width:px;margin:% auto ;} #title h{fontsize:px;} #wrapper{width:px;margin: auto;background:#fff;border:px solid #aaa;padding:px px px;borderradius:px;mozborderradius:px;} #wrapper h{color:#;fontsize:px;textalign:center;margin:px ;} /* box */ box{width:px;margin:px auto ;background:#fff;border:px solid #ddd;} tab_menu{overflow:hidden;} tab_menu li{width:px;float:left;height:px;lineheight:px;color:#fff;background:#;textalign:center;cursor:pointer;} tab_menu licurrent{color:#;background:#fff;} tab_menu li a{color:#fff;textdecoration:none;} tab_menu licurrent a{color:#;} tab_box{padding:px;} tab_box li{height:px;lineheight:px;overflow:hidden;} tab_box li span{margin: px ;fontfamily:"宋體";fontsize:px;fontweight:;color:#ddd;} tab_box hide{display:none;} </style> <script type="text/javascript" src="j </head> <body> <script type="text/javascript"> $(function () { $(demo)Tabs({ }); }); </script> <div id="wrapper"> <h>移動鼠標</h> <div class="box demo"> <ul class="tab_menu"> <li class="current">jquery特效</li> <li>ASPNET MVC</li> <li>javascript</li> <li>NET</li> </ul> <div class="tab_box"> <div> <ul> <li><span>&#;</span><a href="單行文字間歇向上滾動</a></li> <li><span>&#;</span><a href="滾動頁面時DIV到達頂部時固定在頂部</a></li> <li><span>&#;</span><a href="使用jQuery UI修飾title屬性的氣泡懸浮框</a></li> <li><span>&#;</span><a href="清空textarea等輸入框</a></li> <li><span>&#;</span><a href="關燈特效</a></li> <li><span>&#;</span><a href="根據滾動像素顯示隱藏頂部導航條</a></li> <li><span>&#;</span><a href="可改變大小DIV層</a></li> </ul> </div> <div class="hide"> <ul> <li><span>&#;</span><a href="在ASPNET MVC 中自定義AuthorizeAttribute時需要注意的頁面緩存問題" > 在ASPNET MVC 中自定義AuthorizeAttribute時需要注意的頁面緩存問題</a></li> <li><span>&#;</span><a href="柯樂義留言板ASPNET MVC實例</a></li> <li><span>&#;</span><a href="柯樂義留言板介紹</a></li> <li><span>&#;</span><a href="從客戶端中檢測到有潛在危險的 RequestForm 值 的解決方法" > MVC從客戶端中檢測到有潛在危險的 RequestForm 值 的解決方法</a></li> <li><span>&#;</span><a href="重載</a></li> <li><span>&#;</span><a href="中使用AJAX</a></li> </ul> </div> <div class="hide"> <ul> <li><span>&#;</span><a href="()</a></li> <li><span>&#;</span><a href="菜單滾動至頂部後固定</a></li> <li><span>&#;</span><a href="時鐘</a></li> <li><span>&#;</span><a href="事件</a></li> <li><span>&#;</span><a href="在圖片上顯示左右箭頭的翻頁代碼</a></li> <li><span>&#;</span><a href="的頁面刷新上層頁面</a></li> </ul> </div> <div class="hide"> <ul> <li><span>&#;</span><a href="子窗體居中於父窗體代碼</a></li> <li><span>&#;</span><a href="常用正則表達式</a></li> <li><span>&#;</span><a href="窗體最大化代碼</a></li> <li><span>&#;</span><a href="保存文件的後綴</a></li> <li><span>&#;</span><a href="驗證碼生成類</a></li> <li><span>&#;</span><a href="切換(聚焦)選項卡</a></li> <li><span>&#;</span><a href="讓picturebox出現滾動條</a></li> </ul> </div> </div> </div> <a href="效果</a> <a href="效果</a> <a href="效果</a> <a href="其他效果</a> <a href="文章</a> </div> </body> </html>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20647.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.