當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

Jquery实现的Tabs页签

發(fā)布時間：2023/11/27 生活经验 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 Jquery实现的Tabs页签小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

管理導航
系統(tǒng)設置
用戶管理
內容管理
其他管理

1111111 222222222 33333333333 4444444444 555555555555555

<!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"); //將所有選項置為未選中
                $(this).attr("class", "tab-nav-action"); //設置當前選中項為選中樣式
                divs.hide(); //隱藏所有選中項內容
                divs.eq(index).show(); //顯示選中項對應內容
            });});</script>
</head>
<body>
<div class="tabs"><ul id="tabs"><li class="tab-nav">管理導航</li><li class="tab-nav-action">系統(tǒng)設置</li><li class="tab-nav">用戶管理</li><li class="tab-nav">內容管理</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>

轉載于:https://www.cnblogs.com/cnxinwa/p/3460765.html

總結

以上是生活随笔為你收集整理的Jquery实现的Tabs页签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

jquery
Tabs