能用TAB
<!DOCTYPE html>
<html>
<head>
<title>Hello,Tab</title>
<style>
body
{
width: 700px;
margin: 100px auto 0 auto;
font-family: Arial, Helvetica;
font-size: small;
background: #444;
}
/* ------------------------------------------------- */
#tabs{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li{
float: left;
margin: 0 .5em 0 0;
}
#tabs a{
position: relative;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);
box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
background: #fff;
}
#tabs a:focus{
outline: 0;
}
#tabs a::after{
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-transform: skew(10deg);
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-o-transform: skew(10deg);
transform: skew(10deg);
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}
#tabs #current a{
background: #fff;
z-index: 3;
}
#tabs #current a::after{
background: #fff;
z-index: 3;
}
/* ------------------------------------------------- */
#content
{
background: #fff;
padding: 2em;
height: 220px;
position: relative;
z-index: 2;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
-moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
#content h2, #content h3, #content p
{
margin: 0 0 15px 0;
}
/* ------------------------------------------------- */
#about
{
color: #999;
}
#about a
{
color: #eee;
}
</style>
</head>
<body>
<ul id="tabs">
<li><a href="#" name="tab1">One</a></li>
<li><a href="#" name="tab2">Two</a></li>
<li><a href="#" name="tab3">Three</a></li>
<li><a href="#" name="tab4">Four</a></li>
</ul>
<div id="content">
<div id="tab1">
<iframe id="ifm_tab1" src=""></iframe>
</div>
<div id="tab2">
<iframe id="ifm_tab2" src=""></iframe>
</div>
<div id="tab3">
<iframe id="ifm_tab3" src=""></iframe>
</div>
<div id="tab4">
<iframe id="ifm_tab4" src=""></iframe>
</div>
</div>
<br><br>
<script src="jquery-1.7.js"></script>
<script>
$(document).ready(function() {
$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return
}
else{
var ifrmName="ifm_"+$(this).attr('name');
var url="";
if(ifrmName=="ifm_tab1")
url="http://www.baidu.com";
else if(ifrmName=="ifm_tab2")
url="http://www.soso.com";
else if(ifrmName=="ifm_tab3")
url="http://www.so.com";
else if(ifrmName=="ifm_tab4")
url="http://www.bing.com";
$("#content div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
$("#"+ifrmName).attr("src",url);
}
});
});
</script>
</body>
</html>
分享到:
相关推荐
在蓝色经典论坛上下的一个非常不错的tab,值得大家下载研究。
一个非常不错的Ajax实现的tab页的组件及文档。
根据代码改变的Tab,支持AJAX和内部分页,用法简单,全js
有时需要每个tab中有多个页面,也就是说需要 在一个tab中跳转不同的Activity。 当时,我只是简单的在一个Activity中使用了动态布局 (设置layout是否显示) 虽然效果还不错,但实际上依然是同一个Activity,这样的...
tab1选项卡jquery,不错的东东,可用于网站上面.
一款视觉不错的tab切换代码,一键切换风格样式,代码简介
Android Tab 选项卡源代码,是一个很不错的Android源码,有兴趣的伙伴们抽时间可以看一下把
jquery滑动切换tab,当鼠标移动到某个tab的时候选项卡自动滑动到那个tab,默认是第一个选中,给人的体验相当不错,代码简明
一个用户体验很不错的手机端上tab标签加dropload分页加载实例。js代码详细,帮助理解原理,值得借鉴。
发现一个比较不错的类似163邮箱tab标签的例子.
Tab+Viewpage+Fragment实现导航源代码,是一个很不错的Android源码,有兴趣的伙伴们抽时间可以看一下把
一个可以不错的tab,比较简单,适合学习。喜欢的就下吧。
一款基于SVG和CSS3的动画Tab菜单插件,菜单图标使用SVG绘制而成,切换时还会产生不错的动画效果,还同时会渐变地更新页面的背景颜色,当然如果你觉得太花里胡哨,可以自行修改js代码取消背景颜色的渐变切换。
之前我们分享过许多外观漂亮而且非常实用的jQuery Tab菜单插件,比如...今天我们再分享一款基于jQuery和Bootstrap的个性化Tab菜单插件,这款Tab菜单的菜单项非常独特,三角梯形的菜单按钮非常不错,让人印象相当深刻。
带文字动画的jquery TAB风格图片轮播特效,底部是一个TAB式的菜单,点击这个菜单就可切换大图片,同时文字提示紧跟着出现,全部都带有动画效果。效果确实不错,不过制作时候需要处理图片为透明状态,文字描述也是以...
js实现tab内嵌图片滚动代码是一款原生js实现tab选项卡里内嵌图片滚动特效代码,带有左右滚动切换功能,效果还是不错。
满不错一个制作tab的简单代码,希望对大家有帮助
这是一款基于CSS3的Tab切换插件,关于Tab插件我们之前已经向大家分享过很多了,比如这篇超酷实用的CSS3 Tab菜单集合中就有很多不错的Tab插件。今天分享的这款主要是体现了3D翻转的样式,在点击tab菜单项时,内容区域...
声明:这也是我学习时在网上下载的,鉴于分享精神,并且觉得很不错才上传上来的。。。。。 android gallery 导航TAB样式 非常的漂亮和实用 界面设计者可以看一看
一个非常不错的原生qq在线客服代码,多出的点击按钮可以实时隐藏,效果很不错,内部支持tab标签切换。 使用方法: 1、在网页head中引入css以及两个js文件即可 2、将代码部分拷贝到你的网页body结束前。