js实现的页签

大家在进行web开发的时候,经常会遇到这样的问题,就是数据量很大,在页面显示,需要多个表单,并且,如果一页显示的话,需要用户滚动才能查看或编辑数据,带来交互和查阅的不友好,大家肯定会想到用tab页签去实现,虽然jsp和.net的高版本已经进行了集成,但是由于操作或者效率上面的原因,始终不能完美的呈现,下面我给大家共享一个js+css实现的页签,希望能给大家带去方便

html代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <LINK id="luna-tab-style-sheet" href="../css/tab.css" mce_href="css/tab.css" type="text/css" rel="stylesheet"> </HEAD> <BODY> <div id="container-1" style="OVERFLOW: hidden" mce_style="OVERFLOW: hidden" > <ul class="ui-tabs-nav"> <li class="ui-tabs-selected"> <A href="#t1" mce_href="#t1" ><span>页签1</span></A></li> <li class=""> <A href="#t2" mce_href="#t2" ><span>页签2</span></A></li> <li class=""> <A href="#t3" mce_href="#t3" ><span>页签3</span></A></li> </ul> <div style="BORDER-RIGHT: #27537a 1px solid; BORDER-TOP: #27537a 0px solid; BORDER-LEFT: #27537a 1px solid; WIDTH: 760px; BORDER-BOTTOM: #27537a 1px solid"> <div class="ui-tabs-panel ui-tabs-hide" id="t1" style="DISPLAY: block" mce_style="DISPLAY: block"> 我的页签1 </div> <div class="ui-tabs-panel ui-tabs-hide" id="t2" > 我的页签2 </div> <div class="ui-tabs-panel ui-tabs-hide" id="t3"> 我的页签3 </div> </div> </BODY> <mce:script src="../js/tab.js" mce_src="js/tab.js" type="text/javascript"></mce:script> </HTML>

js代码:

css代码:

/* Caution! Ensure accessibility in print and other media types... */ @media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */ .ui-tabs-hide { display: none; } } /* Hide useless elements in print layouts... */ @media print { .ui-tabs-nav { display: none; } } /* Skin */ .ui-tabs-nav, .ui-tabs-panel { font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif; font-size: 12px; } .ui-tabs-nav { list-style: none; margin: 0; padding: 0 0 0 4px; } .ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */ display: block; clear: both; content: " "; } .ui-tabs-nav li { float: left; margin: 0 0 0 1px; /*min-width: 84px; be nice to Opera */ } .ui-tabs-nav a, .ui-tabs-nav a span { display: block; padding: 0 10px; background: url(../images/tab.png) no-repeat; } .ui-tabs-nav a { margin: 1px 0 0; /* position: relative makes opacity fail for disabled tab in IE */ padding-left: 0; color: #27537a; font-weight: bold; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; /* required in IE 6 */ outline: 0; /* prevent dotted border in Firefox */ } .ui-tabs-nav .ui-tabs-selected a { position: relative; top: 1px; z-index: 2; margin-top: 0; color: #000; } .ui-tabs-nav a span { width: 50px; /* IE 6 treats width as min-width */ min-width: 50px; height: 18px; /* IE 6 treats height as min-height */ min-height: 18px; padding-top: 6px; padding-right: 0; } *>.ui-tabs-nav a span { /* hide from IE 6 */ width: auto; height: auto; } .ui-tabs-nav .ui-tabs-selected a span { padding-bottom: 1px; } .ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active { background-position: 100% -150px; } .ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active { background-position: 100% -100px; } .ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span { background-position: 0 -50px; } .ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span { background-position: 0 0; } .ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ cursor: text; } .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */ cursor: pointer; } .ui-tabs-disabled { opacity: .4; filter: alpha(opacity=40); } .ui-tabs-panel { border-top: 1px solid #97a5b0; padding: 1em 8px; background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */ } .ui-tabs-loading em { padding: 0 0 0 20px; background: url(../images/loading.gif) no-repeat 0 50%; } /* Additional IE specific bug fixes... */ * html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */ display: inline-block; } *:first-child+html .ui-tabs-nav { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */ display: inline-block; }

css用到的图片,我已经进行了上传

好了,大家可以自己去看看效果了

猜你喜欢