<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 选项卡</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.blank20{height:20px;overflow:hidden;}
/* tabbed_content */
.tabbed_content{background-color:#000000;width:620px;}
.tabs{height:62px;position:relative;}
.tabs .moving_bg{padding:15px;background-color:#7F822A;background-image:url(images/arrow_down_green.gif);position:absolute;width:125px;z-index:190;left:0;padding-bottom:29px;background-position:bottom left;background-repeat:no-repeat;}
.tabs .tab_item{display:block;float:left;padding:15px;width:125px;color:#ffffff;text-align:center;z-index:200;position:relative;cursor:pointer;font-size:12px;}
.tabbed_content .slide_content{overflow:hidden;background-color:#000000;padding:20px 0 20px 20px;position:relative;width:600px;}
.tabslider{width:5000px;}
.tabslider ul{float:left;width:560px;margin:0px;padding:0px;margin-right:40px;}
.tabslider ul a{color:#ffffff;text-decoration:none;}
.tabslider ul a:hover{color:#aaaaaa;}
.tabslider ul li{padding-bottom:7px;}
</style>
</head>
<body>
<div class="tabbed_content">
<div class="tabs">
<div class="moving_bg"> </div>
<span class="tab_item">js图片特效</span>
<span class="tab_item">js导航菜单</span>
<span class="tab_item">js选项卡特效</span>
<span class="tab_item">js文字特效</span>
</div>
<div class="slide_content">
<div class="tabslider">
<ul>
<li><a href="http://www.jsfoot.com/js/images/qh/2012-03-22/480.html">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
<li><a href="http://www.jsfoot.com/js/images/qh/2012-03-15/422.html">js图片特效制作百叶窗滤镜轮播效果js焦点图片切换</a></li>
<li><a href="http://www.jsfoot.com/js/images/cj/2012-03-14/420.html">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
<li><a href="http://www.jsfoot.com/js/images/cj/2011-08-08/110.html">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
<li><a href="http://www.jsfoot.com/js/images/cj/2011-08-07/108.html">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
<li><a href="http://www.jsfoot.com/js/images/cj/2011-08-05/104.html"> javascript滚动图片按钮控制图片左右自动滚动</a></li>
<li><a href="http://www.jsfoot.com/js/images/cj/2011-07-24/80.html"> javascript滚动图片带按钮控制上下左右自动无缝滚动</a></li>
</ul>
<ul>
<li><a href="http://www.jsfoot.com/js/menu/xl/2012-03-15/430.html">js导航菜单制作一个二级滑动导航菜单</a></li>
<li><a href="http://www.jsfoot.com/js/menu/xl/2012-03-15/428.html">js横向二级导航菜单slide往下滑动动画效果js代码下载</a></li>
<li><a href="http://www.jsfoot.com/js/menu/xl/2012-03-15/426.html">js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单</a></li>
</ul>
<ul>
<li><a href="http://www.jsfoot.com/js/xxk/qh/2012-03-12/398.html">js选项卡类似js导航菜单的js tab选项卡切换效果</a></li>
<li><a href="http://www.jsfoot.com/js/xxk/qh/2011-08-06/106.html">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>
</ul>
<ul>
<li><a href="http://www.jsfoot.com/js/letter/gd/2012-03-21/466.html">js无缝滚动制作js文字无缝滚动和js图片无缝滚动</a></li>
<li><a href="http://www.jsfoot.com/js/letter/gd/2012-03-19/442.html">js文字滚动制作js scroll单排文字滚动向上间隔滚动</a></li>
<li><a href="http://www.jsfoot.com/js/letter/qh/2012-03-18/438.html">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
<li><a href="http://www.jsfoot.com/js/letter/ss/2012-03-18/436.html">js文字特效制作js文字闪烁与文字变色效果</a></li>
<li><a href="http://www.jsfoot.com/js/letter/gd/2012-03-18/434.html">js文字滚动插件制作双行关联向上文字间隙滚动</a></li>
</ul>
</div>
<br style="clear: both" />
</div>
</div><!--tabbed_content end-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//tab effects
var TabbedContent = {
init: function() {
$(".tab_item").mouseover(function() {
var background = $(this).parent().find(".moving_bg");
$(background).stop().animate({
left: $(this).position()['left']
}, {
duration: 300
});
TabbedContent.slideContent($(this));
});
},
slideContent: function(obj) {
var margin = $(obj).parent().parent().find(".slide_content").width();
margin = margin * ($(obj).prevAll().size() - 1);
margin = margin * -1;
$(obj).parent().parent().find(".tabslider").stop().animate({
marginLeft: margin + "px"
}, {
duration: 300
});
}
}
$(document).ready(function() {
TabbedContent.init();
});
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,ul{margin:0; padding:0;}
ul{list-style-type:none;}
a img{border:none;}
.clears{clear:both;}
/*Tab选项卡一*/
.tab{width:500px; margin-top:20px;}
.tab ul li{display:block; width:100px; line-height:25px; border:1px solid #000; float:left; text-align:center; margin-right:2px; cursor:pointer;}
.tab_hover{background:#333; color:#FFF;}
.tab_cont{width:500px; border:1px solid #000; margin-top:5px;}
</style>
<script src="http://code.jquery.com/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/jscript">
$(document).ready(function(){
//Tab选项卡
var $_tab=$(".tab ul li");
$_tab.eq(0).addClass("tab_hover");
$(".tab_cont > div").eq(0).show().siblings().hide();
$_tab.mouseover(function(){
$(this).addClass("tab_hover").siblings().removeClass("tab_hover");
var index=$(this).index();
$(".tab_cont > div").eq(index).show().siblings().hide();
})
});
</script>
</head>
<body>
<!--Tab选项卡-->
<div class="tab">
<ul>
<li>导航一</li>
<li>导航二</li>
<li>导航三</li>
</ul>
<br class="clears" />
</div>
<div class="tab_cont">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$(".boxBar li").mousemove(function(){
$(".boxBar li.first").removeClass('first');
$(this).addClass('first');
$(".boxBody div.a").removeClass('a');
$(".boxBody div").eq($(this).index()).addClass('a');
});
})
</script>
<style>
body{ margin:0; padding:0;}
.Flash{ width:500px; height:260px;}
.boxBar{width:500px; height:30px;}
.boxBar li{width:45px; height:30px; float:left; background-color:#EEE; color:#333;margin-left:6px; line-height:30px;list-style-type:none;text-align:center;font-size:14px; font-family:Microsoft Yahei;}
.boxBar li.first{background-color:#ca0002; color:#FFF;}
#FiA{margin-left:0px;}
.boxBody div{width:500px; height:230px; display:none; background-color:#CCC;}
.boxBody div.a{display:block;}
.boxBody img{ padding-top:7px;}
</style>
</head>
<body>
<div class="Flash">
<div class="boxBar">
<ul>
<li id="FiA" class="first">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>
</div>
<div class="boxBody">
<div class="a">
<a href="#">我是第一</a></div>
<div>
<a href="#">我是第二</a></div>
<div>
<a href="#">我是第三</a></div>
<div>
<a href="#">我是第四</a></div>
<div>
<a href="#">我是第五</a></div>
<div>
<a href="#">我是第六</a></div>
</div>
</div>
</body>
</html>
