<menu id="ocigx"><listing id="ocigx"><em id="ocigx"></em></listing></menu><em id="ocigx"><track id="ocigx"><strong id="ocigx"></strong></track></em>

<samp id="ocigx"></samp>

<mark id="ocigx"><ruby id="ocigx"><legend id="ocigx"></legend></ruby></mark><bdo id="ocigx"></bdo>

首頁 > 設計 > 實用代碼 > 正文

一款基于jQuery的選項卡實戰示例-滑動門選項卡

2018-10-16 20:53:03

字體：大中小

來源：轉載

供稿：網友

一款基于jQuery的選項卡實戰示例，比較實用的一個教程，希望通過此教程讓大家掌握如何使用jQuery創建一個選項卡標簽，這是目前WEB前端設計比較流行的一款功能。

Source Code to Run [www.crfew.com 錯新網]

<!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><style>*{margin:0; padding:0;font-family:"宋體",Arial, Helvetica, sans-serif; font-size:12px}.ts{ width:50%; margin:0 auto}.ts .tsHead{clear:both; height:27px;background:url(http://www.codefans.net/jscss/demoimg/200909/titLine.gif) repeat-x left bottom; border-left:1px solid #88AAD6; border-right:1px solid #88AAD6; border-top:1px solid #88AAD6}.ts .titLeft{float:left; height:27px;font-size:1px; width:12px;;background:url(http://www.codefans.net/jscss/demoimg/200909/titLeft.gif) no-repeat}.ts .titOp{float:left; height:21px; padding:5px 0 0}.ts .titOp li{ float:left; width:100px;height:15px; padding:5px 0 0; margin:0 0 0 3px;border:1px solid #88AAD6; border-bottom:1px solid #fff;background:#eeeeff; color:#999;text-align:center;  cursor:default}.ts .titOp li.current{ background:#fff;color:#290052; }.ts .titRight{float:right; height:26px;font-size:1px; width:32px;;background:url(http://www.codefans.net/jscss/demoimg/200909/titRight.gif) no-repeat}.ts .line{border-left:1px solid #88AAD6;border-right:1px solid #88AAD6;clear:both; height:13px; line-height:13px; padding:5px; background:#E9F9FE}.ts .tsMb{border:1px solid #88AAD6; border-top:none; padding:10px; height:120px; min-height:100px; font-weight:bold}</style><script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.2.6.pack.js"></script><script>$(function(){$("#tsMb div:not(:first)").hide();$("#titOp li").each(function(index){$(this).mouseover(function(){$("#titOp li.current").removeClass("current");$(this).addClass("current");$("#tsMb > div:visible").hide();$("#tsMb div:eq(" + index + ")").show();})})})</script></head><body>需要刷新一下，加載JS后，才可以看到效果<div style="clear:both; height:30px"></div><div class="ts"><div class="tsHead"><div class="titLeft"></div><div class="titOp" id="titOp"><ul><li class="current">腳本調試器</li><li>樣式調試器</li><li>DOM調試器</li></ul></div><div class="titRight"></div></div><div class="tsMb" id="tsMb"><div>腳本</div><div>樣式</div><div>DOM</div></div></div></body></html>

提示:您可以修改后再運行

上一篇：豎向選項卡，藍色樣式-滑動門選項卡

下一篇：這么簡單就實現了CSS滑動菜單（滑動門）-滑動門選項卡

學習交流

phpwind的rewrite重寫原理

phpwind的rewrite重寫原理...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

新聞熱點

為什么家庭升級要選激光電視？

2019-10-14 09:23:13

OPPO推出搭載Snapdragon730G的超強功能的新款K5

2019-10-14 08:35:41

360隨身wifi2代怎么使用？好用嗎？

2019-10-11 08:59:55

360旗下魯大師掛牌上市系中國首個硬件評測供應商

2019-10-11 08:54:28

華為Mate30 Pro系統迎更新新增超高清夜攝功能

2019-10-11 08:49:58

華為P40Pro概念圖：麒麟990+鴻蒙系統前后配7顆鏡頭

2019-10-11 08:25:39

疑難解答

圖片精選

網友關注