<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是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得实现Tab切换功能变得更加简单。下面我们将详细讨论如何使用jQuery实现Tab切换功能。 首先，我们需要在HTML中构建Tab的结构。一个...
在本文中，我们将深入探讨如何使用JavaScript库jQuery来实现一种常见的网页交互功能——Tab切换效果。Tab切换是一种用户界面设计模式，它允许用户在多个视图之间切换，每个视图通常展示不同的内容区域。这种效果在...
在网页设计中，"CSS+JQUERY实现TAB切换"是一种常见的交互设计技术，主要用于优化用户界面，提升用户体验。这种技术允许用户在多个内容区域之间轻松切换，而无需刷新整个页面。在手机端，这种功能尤为重要，因为它能...
jquery tab切换，jquery tab切换，js点击按钮切换图片jquery tab切换，jquery tab切换，jquery tab切换，js点击按钮切换图片jquery tab切换，jquery tab切换，jquery tab切换，js点击按钮切换图片jquery tab切换，...
jQuery实现Tab切换 通过jQuery，我们可以监听Tab的点击事件，然后切换对应的图片滑块。以下是一个简单的实现： ```javascript $(document).ready(function() { $('.tabs a').click(function(e) { e....
4. **jQuery实现Tab切换**：首先，设置所有内容区域默认为隐藏。当用户点击某个Tab按钮时，解除当前选中Tab的隐藏状态，同时隐藏其他非选中的内容区域。可以使用`.addClass()`和`.removeClass()`来管理选中状态的CSS...
在这个“jquery tab 切换”的主题中，我们将深入探讨如何使用jQuery实现Tab切换效果，并结合HTML和CSS创建一个功能完整的Tab组件。 首先，jQuery库提供了丰富的DOM操作、事件处理和动画效果，使得创建Tab切换变得...
本篇文章将深入探讨如何使用JQuery实现Tab切换效果。 首先，我们需要理解Tab切换的基本结构。通常，Tab切换包含两个主要部分：Tab头（表示各个选项）和Tab内容（与Tab头对应的显示区域）。当用户点击某个Tab头时，...
在实现Tab切换时，jQuery提供了简洁的API，使得开发者能够快速构建功能丰富的界面。 ### 2. Tab切换基本结构 一个基本的Tab组件通常包含两部分：HTML结构和CSS样式。HTML结构一般由一个容器元素（如div）包裹一组...
以上就是一个基本的jQuery Tab切换实现。当然，实际项目中可能需要考虑更多细节，比如添加动画效果、处理键盘导航、支持动态加载内容等。此外，现在有许多现成的插件，如Bootstrap的Nav pills或jQuery UI的Tabs，...
本示例“jQuery带tab切换搜索框样式代码”是关于如何利用jQuery实现一个功能丰富的搜索框，该搜索框集成了选项卡切换功能，为用户提供更便捷的交互体验。以下是对这个主题的详细讲解： 1. **jQuery基础**：首先，...
5. **jQuery实现Tab切换逻辑** 使用jQuery实现Tab切换，首先在文档加载完成后通过`$(document).ready`方法绑定点击事件。`$.fn.setTab`方法是自定义的一个扩展函数，用于为`<ul>`元素添加点击事件。点击事件会触发...
本主题将深入探讨如何使用jQuery实现一个仿Flash的Tab切换效果，从而为用户提供流畅且互动性强的界面体验。 Flash曾是创建动态网页元素的首选技术，但随着HTML5的普及，jQuery等JavaScript库提供了更多替代方案。...
本文将深入探讨如何利用jQuery实现Tab切换，并分享一些适用于PC和移动端的技巧。 一、jQuery Tab切换基础 1. HTML结构：首先，我们需要创建一个基础的HTML结构，通常包括一个容器元素（如div）来包裹所有的Tab和...
在实现Tab切换功能时，jQuery提供了一套简洁的API来绑定事件、切换类名，以及动态修改DOM元素的属性。 Tab切换的基本结构通常包括一个包含多个选项卡（Tab）的容器和相对应的内容区域。每个选项卡都关联一个内容...
jQuery实现的tab标签自动切换效果
3. **jQuery初始化**：在页面加载完成后，使用`$(document).ready()`函数来初始化Tab切换功能。这通常包括隐藏所有内容区域，只显示第一个内容，以及添加点击事件监听器到每个Tab标题。 4. **事件处理**：当用户...
jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡内容切换代码.rar jQuery纵向tab选项卡...
本文将详细解析"码农jQuery页签切换Tab标签切换+导航栏+手风琴"这一主题，结合提供的文件资源，探讨如何使用jQuery实现这些功能。 首先，我们来看"jQuery_tab.html"，这通常是一个展示页签切换效果的示例页面。页签...
在本教程中，我们将探讨如何利用jQuery实现一个简单的tab切换插件，以提升用户体验。 首先，我们需要理解tab切换的基本概念。在网页设计中，tab切换是一种常见的布局方式，它允许用户通过点击不同的tab来显示或隐藏...