<html> <head> <style type="text/css"> .STYLE1 { color: #FF0000; font-weight: bold; } .blueBtn { background:#5B9BD5 none repeat scroll 0 0; color:#FFFFFF; font-size:10px; height:28px; width:70px; letter-spacing:1px; } .grayBtn { background:#7F7F7F none repeat scroll 0 0; color:#FFFFFF; font-size:10px; height:28px; width:70px; letter-spacing:1px; } .STYLE2 { color: #0000FF } .grid-view .button-column { text-align: center; } #wrapper{ text-align: left; margin: 0 auto; width:950px; padding:0;} #content { float: right; width:765px;} th { text-align:center; } </style> <!--reset.css--> <style> body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0; padding:0;} body,button,input,select,textarea { font-family: tahoma,Arial,"Microsoft YaHei",SimSun; font-size: 12px; line-height: 1.5em;color:#222} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;} img{border:0;} img{ vertical-align:top} address,caption,cite,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{display:block; margin:0; padding:0;}/* HTML5 */ code,kbd,pre,samp{font-family:courier new,courier,monospace} ol,ul,li{list-style:none;} a{text-decoration:none; color:#222;} a:hover{color:#052299;} a:active{color:#052299;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} button{ vertical-align: baseline; *vertical-align:middle;font-family: tahoma, \5b8b\4f53, arial; font-size: 100%; border:none; background:none; } input[type=checkbox],input[type=radio]{vertical-align:middle; margin:0 5px;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}textarea{resize:none;} textarea{overflow:auto; font:100% tahoma,\5b8b\4f53,arial;} table{border-collapse:collapse; border-spacing:0;} /*= 清除浮动=*/ .clear{clear: both; height:0px; line-height:0px; font-size:0px;} .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} /* End hide from IE-mac */ *+html .clearfix {min-height: 1%;} *html{zoom:expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)} (this))} /* 左右浮动 */ .fl{ float:left;} .fr{ float:right} </style> <!--index.css--> <style> .navigationTemp{ width:100%; margin:0 auto} .navigationTemp .nav{ position:relative; width:100%; height:40px; background:#e1e1e1; overflow:hidden;border-bottom:4px solid #ffcb4f;} .nav-item{ position:relative; float:left; width:120px; height:40px; line-height:40px; text-align:center; font-size:14px; z-index:1;} .nav-item a{ display:block; height:40px; color:#000;font-weight: normal; border-right:1px solid #ffffff} .nav-item a:hover{ color:#ffffff;font-weight:bold} .move-bg{ display:none;position:absolute;left:0;top:0; width:120px; height:40px; background:#ffcb4f; z-index:0} li.cur a{color:#ffffff;font-weight:bold} </style> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <!--movebg.js--> <script> (function($){ $.fn.movebg=function(options){ var defaults={ width:120,/*移动块的大小*/ extra:50,/*反弹的距离*/ speed:300,/*块移动的速度*/ rebound_speed:300/*块反弹的速度*/ }; var defaultser=$.extend(defaults,options); return this.each(function(){ var _this=$(this); var _item=_this.children("ul").children("li").children("a");/*找到触发滑块滑动的元素 */ var origin=_this.children("ul").children("li.cur").index();/*获得当前导航的索引*/ var _mover=_this.find(".move-bg");/*找到滑块*/ var hidden;/*设置一个变量当html中没有规定cur时在鼠标移出导航后消失*/ if (origin==-1){origin=0;hidden="1"} else{_mover.show()};/*如果没有定义cur,则默认从第一个滑动出来*/ var cur=prev=origin;/*初始化当前的索引值等于上一个及初始值;*/ var extra=defaultser.extra;/*声明一个变量表示额外滑动的距离*/ _mover.css({left:""+defaultser.width*origin+"px"});/*设置滑块当前显示的位置*/ //设置鼠标经过事件 _item.each(function(index,it){ $(it).mouseover(function(){ cur=index;/*对当前滑块值进行赋值*/ move(); prev=cur;/*滑动完成对上个滑块值进行赋值*/ }); $(it).click(function(){ origin = index; cur=index;/*对当前滑块值进行赋值*/ $(this).css("color","#ffffff"); $(this).parent().siblings().children().css("color","#000"); }); }); _this.mouseleave(function(){ cur=origin;/*鼠标离开导航时当前滑动值等于最初滑块值*/ move(); if(hidden==1){_mover.stop().fadeOut();}/*当html中没有规定cur时在鼠标移出导航后消失*/ }); //滑动方法 function move(){ _mover.clearQueue(); if(cur<prev){extra=-Math.abs(defaultser.extra);} /*当当前值小于上个滑块值时,额外滑动值为负数*/ else{extra=Math.abs(defaultser.extra)};/*当当前值大于上个滑块值时,滑动值为正数*/ _mover.queue( function(){ $(this).show().stop(true,true).animate({left:""+Number(cur*defaultser.width+extra)+""},defaultser.speed), function(){$(this).dequeue()} } ); _mover.queue( function(){ $(this).stop(true,true).animate({left:""+cur*defaultser.width+""},defaultser.rebound_speed), function(){$(this).dequeue()} } ); }; }) } })(jQuery); </script> <script> $(function() { // 弹出窗事件 $("#div1").hide(); //先让div隐藏 $("#button1").click(function(){ $("#div1").fadeIn("slow");//淡入淡出效果 显示div }); $("#span2").click(function(){ $("#div1").fadeOut("slow");//淡入淡出效果 隐藏div }) }); </script> </head> <body> <div id="content" class="main"> <div> <!-- 以下部分可以到另一动态页面中-start --> <style> </style> <!-- 代码 开始 --> <div class="navigationTemp"> <div class="nav"> <ul> <li class="nav-item" id="tab1"><a href="${rc.contextPath}/tab1.htm">tab1</a></li> <li class="nav-item" id="tab2"><a href="${rc.contextPath}/tab2">tab2</a></li> </ul> <!--移动的滑动--> <div class="move-bg"></div> <!--移动的滑动 end--> </div> </div> <script> $(function(){ var size = $("li.nav-item").length; var widthPx = 765/size; $("li.nav-item").css("width",widthPx); $("div.move-bg").css("width",widthPx); var menuItem = $("#currentMenu").val(); var a = $("#"+menuItem).addClass("cur"); $(".navigationTemp .nav").movebg({width:widthPx/*滑块的大小*/,extra:20/*额外反弹的距离*/,speed:250/*滑块移动的速度*/,rebound_speed:300/*滑块反弹的速度*/}); }) </script> <!-- 以下部分可以到另一动态页面中-end --> <input type="hidden" id="currentMenu" value="tab2"/> </div> </div> <body> </html>
jquery实现tab切换
猜你喜欢
转载自newjava-sina-cn.iteye.com/blog/2409217
今日推荐
周排行