用javascript写tabPanel

无双Rama · 发表于 2013-2-7 19:40:44

<html> <head> <meta content="text/html; charset=UTF-8;"/> <style type="text/css"> /*------------tab----------*/ .tabItemContainer{ height:30px; overflow:hidden; background:#F7F7F7 url(dot.gif) bottom repeat-x; margin-bottom:6px; } .tabItemContainer .tab, .tabItemContainer .blank{ float:left; height:24px; line-height:24px; margin:0; margin-right:6px; margin-top:6px; overflow:hidden; cursor:pointer; } .tabItemContainer .blank{ width:48px; } .tabItemContainer .tab div{ float:left; height:24px; } .tabItemContainer .selected{ } .tabItemContainer .tab_left, .tabItemContainer .selected .tab_left{ background:url(tab_on_left.gif) no-repeat bottom right; width:5px; } .tabItemContainer .tab_middle, .tabItemContainer .selected .tab_middle{ padding:0 16px; } .tabItemContainer .selected .tab_middle{ background:url(tab_on_center.gif) repeat-x bottom;s padding:0 16px; } .tabItemContainer .tab_right, .tabItemContainer .selected .tab_right{ background:url(tab_on_right.gif) no-repeat bottom left; width:5px; } .tabItemContainer .tab_left{ background:url(tab_off_left.gif) no-repeat bottom right; } .tabItemContainer .tab_middle{ background:url(tab_off_center.gif) repeat-x bottom right; } .tabItemContainer .tab_right{ background:url(tab_off_right.gif) no-repeat bottom left; } /*------------tab end----------*/ </style> <script type="text/javascript"> //改变tab样式，function changeTab(tabIndex){ var tabIndexVal = parseInt(tabIndex); //var tabCount=jQuery('#tabCount').val(); for(var i=1;i<=3;i++){ //改变选项卡样式if(tabIndexVal==i){document.getElementById('tab'+i).className="tab selected"; document.getElementById('d'+i).style.display="block"; //jQuery('#tab'+i).removeClass("tab"); //jQuery('#tab'+i).addClass("tab selected"); }else{ document.getElementById('tab'+i).className="tab"; document.getElementById('d'+i).style.display="none"; //jQuery('#tab'+i).removeClass("tab selected"); //jQuery('#tab'+i).addClass("tab"); } } //submit2Times(tabKey); } </script> </head> <body> <div class="tabItemContainer"> <div id="tab1" class="tab selected"> <div class="tab_left"></div> <div class="tab_middle"> <a href="javascript:changeTab(1);"> first tab page </a> </div> <div class="tab_right"></div> </div> <input id="first" type="hidden" value="asdf"/><div id="tab2" class="tab"> <div class="tab_left"></div> <div class="tab_middle"> <a href="javascript:changeTab(2);"> second tab page </a> </div> <div class="tab_right"></div> </div> <input id="secinput" type="hidden" value="asdf"/><div id="tab3" class="tab"> <div class="tab_left"></div> <div class="tab_middle"> <a href="javascript:changeTab(3);"> first tab page </a> </div> <div class="tab_right"></div> </div> <input id="third" type="hidden" value="asdf"/></div><div id="d1" style="float:left;width:100%; height:500px; background-color:#891989"> first </div> <div id="d2" style="display:none; float:left;width:100%; height:500px; background-color:#893986"> second </div> <div id="d3" style="display:none; float:left;width:100%; height:500px; background-color:#896983"> thrid </div> </body> </html>

		自动登录	找回密码
密码			立即注册