3 4 5 6 Jquery实现的Tabs页签 - 11GX
首页 > Jquery实现的Tabs页签

Jquery实现的Tabs页签

  • 管理导航
  • 系统设置
  • 用户管理
  • 内容管理
  • 其他管理
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">系统设置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">1111111div><div style="display:none">222222222div><div style="display:none">33333333333div><div style="display:none">4444444444div><div style="display:none">555555555555555div>div>
body>
html>

 

 

转载于:https://www.cnblogs.com/cnxinwa/p/3460765.html

更多相关：