$(function(){
var tab_menu_li = $('.tab_menu li');
$('.tab_box div:gt(0)').hide();
tab_menu_li.mouseover(function(){
$(this).addClass('selected')
.siblings().removeClass('selected');
var index = tab_menu_li.index(this);
$('.tab_box div').eq(index).show()
.siblings().hide();
}).hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
});
$(function(){
var banner_menu_li = $('.banner_menu li');
banner_menu_li.mouseover(function(){
$(this).addClass('selected')
.siblings().removeClass('selected');
var index = banner_menu_li.index(this);
$('.banner_content div').eq(index).show()
.siblings().hide();
});
});
*{ margin:0; padding:0;}
body{ font:11px Verdana, Geneva, sans-serif; padding:10px;}
ul{list-style:none;}
img{border:none;}
.tab{ width:300px; margin-bottom:10px;}
.tab_menu{ height:1%; overflow:hidden;}
.tab_menu li{ float:left; padding:2px 10px; margin-right:1px; border:1px solid #fc0;border-bottom:none; cursor:pointer;}
.tab_box{ height:150px; border:1px solid #fc0; background:#ff6; overflow:hidden; }
.tab_box div{ padding:5px;}
.selected{ background:#fc0;}
.hidden{ display:none;}
.hover{ background:#f60; color:white;}
.banner{ border:1px solid #fc0; background:#ff6; width:800px; height:150px; position:relative; overflow:hidden;}
.banner_menu{position:absolute; bottom:5px; right:5px;}
.banner_menu li{ padding:0 5px; height:18px; line-height:18px; border:1px solid #fc0; float:left; display:block; margin-right:5px; cursor:pointer;}
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected"><span>xhtml</span></li>
<li><span>css</span></li>
<li><span>javascript</span></li>
</ul>
</div>
<div class="tab_box">
<div>xhtml</div>
<div>css</div>
<div>javascript</div>
</div>
</div>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected"><span>JQuery</span></li>
<li><span>ThinkPHP</span></li>
<li><span>PHP MySQL</span></li>
</ul>
</div>
<div class="tab_box">
<div>JQuery</div>
<div>ThinkPHP</div>
<div>PHP MySQL</div>
</div>
</div>
<div class="banner">
<div class="banner_menu">
<ul>
<li class="selected">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="banner_content">
<div><a href="#"><img src="images/01.jpg" alt=""/></a></div>
<div><a href="#"><img src="images/02.jpg" alt=""/></a></div>
<div><a href="#"><img src="images/03.jpg" alt=""/></a></div>
</div>
</div>
分享到:
相关推荐
基于jquery tabs切换源码,demo实现了不同的切换方式,代码精简值得参考
jquerytabs jquery选项卡 jquery tabs
秋天 jQuery tabs 插件是基于jQuery框架完成的标签切换示例,您可以通过修改在自己的WEB网页中使用。 调用方法 网页案例样式
jQuery tabs 纵向显示,jQuery tabs vertical,jQuery tabs
jQuery代码只有几行,非常易懂,效果很好。
jQuery Tabs插件 PWS Tabs 演示地址:http://www.jq22.com/plugin/1752
jQuery Tabs
jQuery Tabs插件EasyTabs.js 演示地址:http://www.jq22.com/plugin/259
jQuery Tabs插件 (选项卡插件) --推荐 .效果不错,使用简单的选项卡插件
自动切换模式Tab选项卡 - Rotating jQuery tabs
CardTabs是一款简单的jquery Tabs选项卡插件。该jquery Tabs选项卡插件可以自定义主题,兼容IE8浏览器,而且使用简单,非常实用。
jQueryTab是一款带CSS3过渡动画效果的jQuery Tabs选项卡插件。它是轻量级插件,使用简单,采用响应式设计,并支持多种CSS3动画过渡效果。
带CSS3过渡动画效果的jQuery Tabs选项卡插件
这是一款简单实用的响应式jQuery Tabs选项卡插件。该选项卡插件会根据容器的大小弹性伸缩,它实用简单,选项卡的样式可以实用CSS来自定义。
jQuery Tabs带流程步骤的滑动选项卡.zip
这是一款基于bootstrap的简单jquery tabs选项卡美化效果。该tabs选项卡美观大方,使用简单,适用于多种网页场景。
Tabslet是一款轻量级,使用简单,移动友好且兼容IE8的jQuery Tabs选项卡插件。