在css里面代码:
.container {width: 100%; margin: 1px auto;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
font-size: 1.2em;
height: 125px;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
}
.tab_content img {
float: left;
margin: 0 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
在js里面需要jquery代码:
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
});
在jsp里面代码:
开始需要引入:<script type="text/javascript"src="jquery.min.js"></script>
<div class="container">
<ul class="tabs">
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
<li><a href="#tab4">标签四</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div>区域一</div>
</div>
<div id="tab2" class="tab_content">
<div>区域二</div>
</div>
<div id="tab3" class="tab_content">
<div>区域三</div>
</div>
<div id="tab4" class="tab_content">
<div>区域四</div>
</div>
</div>
</div>
分享到:
相关推荐
jQuery+css弹性伸缩Tabs选项卡代码是一款根据容器的大小弹性伸缩,选项卡的样式可以实用CSS来自定义,选项卡带平滑拉伸动画效果。
jQuery css3彩色动画Tabs选项卡切换特效
jQuery css弹性伸缩Tabs选项卡代码是一款根据容器的大小弹性伸缩,选项卡的样式可以实用CSS来自定义,选项卡带平滑拉伸动画效果。
tabulous.js是一款现代时尚的jQuery和CSS3 Tabs选项卡插件。该选项卡中可以放置任何HTML内容,它使用简单,并且在选项卡切换时可以设置各种的动画过渡效果。
jQueryTab是一款带CSS3过渡动画效果的jQuery Tabs选项卡插件。它是轻量级插件,使用简单,采用响应式设计,并支持多种CSS3动画过渡效果。
这是一款基于Bootstrap的Tabs选项卡特效。该Tabs选项卡在bootstrap tabs的基础上,使用CSS3进行了一些效果美化,增强用户体验效果。
HTML5+CSS3实现Tabs选项卡特效.zip
插件描述:这是一款使用纯CSS3制作的Tabs选项卡特效。该Tabs选项卡简约时尚,各个选项卡之间切换时使用了下划线跟随动画,整体效果非常不错。演示地址:http://www.jq22.com/jquery-info10236
jQuery响应速度快的Tabs选项卡.zip
jQuery彩色动画Tabs选项卡特效是一款提供多种颜色主题,可以制作背景图片动画,甚至可以自定义你自己的颜色主题。
带CSS3过渡动画效果的jQuery Tabs选项卡插件
jQuery大容器左侧Tabs选项卡.zip
jQuery彩色带图标Tabs选项卡代码.zip
这是一款非常简单的Bootstrap Tabs选项卡美化特效。该特效在原生Bootstrap Tabs选项卡的基础上,通过css3来对它进行了一些美化效果。
这是一款简单实用的响应式jQuery Tabs选项卡插件。该选项卡插件会根据容器的大小弹性伸缩,它实用简单,选项卡的样式可以实用CSS来自定义。
jQuery弹性伸缩Tabs选项卡.zip
这是一款简单实用的响应式jQuery Tabs选项卡插件。该选项卡插件会根据容器的大小弹性伸缩,它实用简单,选项卡的样式可以实用CSS来自定义。
jquery幻灯片tabs选项卡.zip