<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
今日推荐
周排行