<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 float=*/
.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))}
/* float left and right */
.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,/*size of moving block*/
extra:50,/*Rebound distance*/
speed: 300, /* speed of block movement */
rebound_speed:300/*The speed of the rebound of the block*/
};
var defaultser=$.extend(defaults,options);
return this.each(function(){
var _this=$(this);
var _item=_this.children("ul").children("li").children("a");/*find the element that triggers the slider to slide */
var origin=_this.children("ul").children("li.cur").index();/*Get the index of the current navigation*/
var _mover=_this.find(".move-bg");/*find the slider*/
var hidden;/*Set a variable to disappear after the mouse moves out of the navigation when cur is not specified in html*/
if (origin==-1){origin=0;hidden="1"} else{_mover.show()};/*If cur is not defined, it will slide out from the first one by default*/
var cur=prev=origin;/*initialize the current index value equal to the previous and initial value;*/
var extra=defaultser.extra;/*declare a variable to represent the extra sliding distance*/
_mover.css({left:""+defaultser.width*origin+"px"});/*Set the current position of the slider*/
//Set the mouse over event
_item.each(function(index,it){
$(it).mouseover(function(){
cur=index;/*Assign the current slider value*/
move();
prev=cur;/*Swipe to complete the assignment to the previous slider value*/
});
$(it).click(function(){
origin = index;
cur=index;/*Assign the current slider value*/
$(this).css("color","#ffffff");
$(this).parent().siblings().children().css("color","#000");
});
});
_this.mouseleave(function(){
cur=origin;/*The current sliding value is equal to the initial slider value when the mouse leaves the navigation*/
move();
if(hidden==1){_mover.stop().fadeOut();}/*When cur is not specified in html, it disappears after the mouse is moved out of the navigation*/
});
//slide method
function move(){
_mover.clearQueue();
if(cur<prev){extra=-Math.abs(defaultser.extra);} /*When the current value is less than the previous slider value, the extra sliding value is negative*/
else{extra=Math.abs(defaultser.extra)};/*When the current value is greater than the previous slider value, the sliding value is positive*/
_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()
{
// popup event
$("#div1").hide(); //Hide the div first
$("#button1").click(function(){
$("#div1").fadeIn("slow");//Fade in and out effect display div
});
$("#span2").click(function(){
$("#div1").fadeOut("slow");//The fade effect hides the div
})
});
</script>
</head>
<body>
<div id="content" class="main">
<div>
<!-- The following part can go to another dynamic page-start -->
<style>
</style>
<!-- code start -->
<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>
<!--Swipe to move -->
<div class="move-bg"></div>
<!--Moved sliding 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/*slider size*/,extra:20/*extra bounce distance*/,speed:250/*slider moving speed*/, rebound_speed:300/*The speed of the slider rebound*/});
})
</script>
<!-- The following part can go to another dynamic page-end -->
<input type="hidden" id="currentMenu" value="tab2"/>
</div>
</div>
<body>
</html>jquery implements tab switching
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=326182197&siteId=291194637
Ranking