Jquery实现的Tabs页签
生活随笔
收集整理的這篇文章主要介紹了
Jquery实现的Tabs页签
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
- 管理導(dǎo)航
- 系統(tǒng)設(shè)置
- 用戶管理
- 內(nèi)容管理
- 其他管理
?
?
?
<!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><title></title><style type="text/css">.tabs {float:left;background-image: url(themes/images/nav_bg.jpg);width:100%; } .tabs ul {list-style: none outside none;margin: 0;padding: 0; } .tabs ul li {float: left;line-height: 24px;margin: 0;padding: 2px 20px 0 15px; } .tab-nav{background: url(themes/images/manage_r2_c14.jpg) no-repeat;cursor:pointer; } .tab-nav-action{background: url(themes/images/manage_r2_c13.jpg) no-repeat;cursor:pointer; } .tabs-body {border-bottom: 1px solid #B4C9C6;border-left: 1px solid #B4C9C6;border-right: 1px solid #B4C9C6;float: left;padding: 5px 0 0;width: 100%; } .tabs-body div {padding:10px; }</style><script type="text/javascript" src="jquery-1.10.2.js"></script><script type="text/javascript">$(document).ready(function () {$("#tabs li").bind("click", function () {var index = $(this).index();var divs = $("#tabs-body > div");$(this).parent().children("li").attr("class", "tab-nav"); //將所有選項(xiàng)置為未選中 $(this).attr("class", "tab-nav-action"); //設(shè)置當(dāng)前選中項(xiàng)為選中樣式 divs.hide(); //隱藏所有選中項(xiàng)內(nèi)容 divs.eq(index).show(); //顯示選中項(xiàng)對應(yīng)內(nèi)容 });});</script> </head> <body> <div class="tabs"><ul id="tabs"><li class="tab-nav">管理導(dǎo)航</li><li class="tab-nav-action">系統(tǒng)設(shè)置</li><li class="tab-nav">用戶管理</li><li class="tab-nav">內(nèi)容管理</li><li class="tab-nav">其他管理</li></ul></div><div id="tabs-body" class="tabs-body"><div style="display:block">1111111</div><div style="display:none">222222222</div><div style="display:none">33333333333</div><div style="display:none">4444444444</div><div style="display:none">555555555555555</div></div> </body> </html>
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/cnxinwa/p/3460765.html
總結(jié)
以上是生活随笔為你收集整理的Jquery实现的Tabs页签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 牛肉多少钱一斤现在
- 下一篇： FilenameFilter的使用