能用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>
分享到：
相关推荐
【标题】"一个不错的ui_tab"所指的是一款UI设计中的Tab组件，它通常用于网页或应用程序界面中，以提供多页面浏览或切换的功能。Tab设计可以帮助用户更有效地组织和导航内容，使得复杂的界面变得更加简洁易用。在这个...
1. HTML结构：首先，我们需要构建Tab的HTML结构，通常由一组导航按钮（每个代表一个Tab）和一个用于展示内容的区域组成。例如： ```html <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li...
标题 "一个很不错的Tab选项卡 支持AJAX" 暗示了这是一个关于网页界面设计的专题，特别是关于Tab选项卡的实现。这个实现具备AJAX（Asynchronous JavaScript and XML）特性，允许用户在不刷新整个页面的情况下更新内容...
标题"不错的jquery tab效果"表明我们将讨论一个高效且实用的jQuery插件，用于实现网页上的Tab组件。描述中的"页面tab 直接改改标题就可以用"暗示这个jQuery Tab解决方案易于定制，只需简单修改标题即可适应不同的...
虽然在Android设计指南中已经推荐使用`TabLayout`替代`PagerTitleStrip`，但在一些老项目或对性能要求较高的场景中，`PagerTitleStrip`仍然是一个不错的选择。 在实际应用中，创建一个`Tab`类型的界面通常包含以下...
有时需要每个tab中有多个页面，也就是说需要 在一个tab中跳转不同的Activity。 当时，我只是简单的在一个Activity中使用了动态布局 （设置layout是否显示） 虽然效果还不错，但实际上依然是同一个Activity，这样的...
1. HTML结构：一个基础的TAB效果通常包含一组容器（例如`<div>`），用于存放TAB按钮和对应的内容区域。每个TAB按钮是一个链接或按钮元素，如`<a>`或`<button>`，而内容区域则使用`<div>`或其他块级元素，初始时大...
在描述中提到的"一款视觉不错的tab切换代码，一键切换风格样式"，意味着这个代码库提供了良好的视觉效果和易于定制的样式切换功能。对于开发者来说，这意味着可以快速地为项目添加专业且美观的tab切换效果，同时根据...
标题"ViewPager+Fragment+Tab底部导航效果不错"暗示了实现这一功能的具体技术栈，包括ViewPager、Fragment以及自定义的Tab布局。现在，我们将深入探讨这些关键组件及其在实现所述效果中的作用。 首先，`ViewPager`...
标题中的“jquery竖排的TAB导航插件.rar”是指一个基于jQuery库的，用于创建垂直排列的TAB导航栏的插件。这个插件是专门为网页设计者和开发者准备的，旨在提供一种高效、灵活的方式来组织和展示网站内容。在网页设计...
1. `tab.css`：这是一个CSS（层叠样式表）文件，用于定义选项卡组件的外观和布局。CSS是网页设计的重要组成部分，用于控制页面的样式和布局，如颜色、字体、间距等。在这个案例中，`tab.css`将包含定义选项卡样式和...
尽管现在不再推荐使用，但对于兼容旧版本Android的应用来说，这是一个不错的选择。 3. **ViewPager + TabLayout**：这是目前Android开发中最常用的方法，特别是在Android Design Support Library引入后。ViewPager...
一款基于SVG和CSS3的动画Tab菜单插件，菜单图标使用SVG绘制而成，切换时还会产生不错的动画效果，还同时会渐变地更新页面的背景颜色，当然如果你觉得太花里胡哨，可以自行修改js代码取消背景颜色的渐变切换。
之前我们分享过许多外观漂亮而且非常实用的jQuery Tab菜单插件，比如...今天我们再分享一款基于jQuery和Bootstrap的个性化Tab菜单插件，这款Tab菜单的菜单项非常独特，三角梯形的菜单按钮非常不错，让人印象相当深刻。
三星Galaxy Tab S概览 本文将对三星Galaxy Tab S进行详细的介绍，从屏幕尺寸、屏幕材质、规格配置、电池寿命、摄像头、指纹识别功能等多...如果您正在寻找一个高性能的平板电脑，三星Galaxy Tab S是一个不错的选择。
在这种情况下，`Gallery`组件是一个不错的选择。`Gallery`是Android提供的一个特殊的视图，它允许用户在水平方向上浏览一系列项目，就像一个水平滚动的列表。在本案例中，我们将讨论如何利用`Gallery`来实现滑动的...
带文字动画的jquery TAB风格图片轮播特效，底部是一个TAB式的菜单，点击这个菜单就可切换大图片，同时文字提示紧跟着出现，全部都带有动画效果。效果确实不错，不过制作时候需要处理图片为透明状态，文字描述也是以...
今天，给大家介绍一款非常不错的时间表样式幻灯片。顶部时间轴按照tab标签样式以此切换，底部对应说明每个年份的内容，效果很流畅。 适合做年份大事记或者日程表安排之类的效果，兼有幻灯片和tab标签两种效果，懒人...
这是一款基于CSS3的Tab切换插件，关于Tab插件我们之前已经向大家分享过很多了，比如这篇超酷实用的CSS3 Tab菜单集合中就有很多不错的Tab插件。今天分享的这款主要是体现了3D翻转的样式，在点击tab菜单项时，内容区域...
本段内容主要介绍了一个使用原生JavaScript实现的Tab切换效果，并提供了相关的代码和使用说明。...这不仅对初学者有很好的学习参考价值，对于希望减少外部依赖，提高页面加载速度的开发者来说，也是一个不错的选择。