<!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=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
#tab {
width:100%;
position:relative;
}
/*选中的容器*/
#tab h3 {
float:left;
width:115px;
height:26px;
line-height:26px;
font-family: Arial;
text-align:center;
color:navy;
background:#eee url(images/Tag_tab.gif) no-repeat;
}
/*默认标题样式*/
#tab .up {
background:#fff url(images/Tag_tab1.gif) no-repeat;
bgcolor:#8DB9DC;
}
</style>
<body onload="goto(1,2,3,4)" scroll="no">
<div id="tab">
<h3 id="hh1" onclick="goto(1,2,3,4)" >新浪</h3>
<h3 id="hh2" onclick="goto(2,1,3,4)">网易</h3>
<h3 id="hh3" onclick="goto(3,1,2,4)">百度</h3>
<h3 id="hh4" onclick="goto(4,1,2,3)">JavaEye</h3>
</div>
<iframe style="display:none" src="http://www.sina.com" id="if1" name="if1" width="100%" style="height:740px" frameborder="0" ></iframe>
<iframe style="display:none" src="" id="if2" name="if2" width="100%" style="height:740px" frameborder="0" ></iframe>
<iframe style="display:none" src="" id="if3" name="if3" width="100%" style="height:740px" frameborder="0" ></iframe>
<iframe style="display:none" src="" id="if4" name="if4" width="100%" style="height:740px" frameborder="0" ></iframe>
<script type="text/javascript">
function goto(a,b,c,d){
//显示
document.getElementById("hh"+a).className=" up";
document.getElementById("if"+a).style.display="block";
if(a==2){
document.getElementById("if"+a).src="http://www.163.com";
}
else if(a==3){
document.getElementById("if"+a).src="http://www.baidu.com";
}
else if(a==4){
document.getElementById("if"+a).src="http://www.iteye.com";
}
//隐藏
document.getElementById("hh"+b).className="";
document.getElementById("if"+b).style.display="none";
document.getElementById("hh"+c).className="";
document.getElementById("if"+c).style.display="none";
document.getElementById("hh"+d).className="";
document.getElementById("if"+d).style.display="none";
}
</script>
</body>
</html>
分享到：
相关推荐
【C#版多标签页浏览器】是一种基于C#编程语言实现的桌面应用程序，它允许用户在同一窗口内同时浏览多个网页，类似于我们常见的浏览器如遨游、360浏览器和腾讯TT。这种设计提供了方便的多任务浏览体验，用户可以通过...
在实现多标签页功能之前，我们首先需要定义页面的基本结构。通常来说，一个典型的多标签页结构由以下几个部分组成： 1. **标签列表**：显示各个可切换的标签，用户点击时触发对应的切换操作。 2. **内容容器**：...
在网页设计中，JS（JavaScript）常常用于实现交互式的用户界面，其中标签页是一种常见的功能，它可以有效地组织和展示大量信息。本主题将探讨三种不同的JS实现标签页的方法，尽管它们的功能相同，但代码实现方式各有...
使用EasyUI创建动态标签页非常简单，只需要在HTML中定义一个`<div>`作为容器，然后使用JavaScript进行初始化。例如： ```html 标签页1" style="padding:10px;">内容1 标签页2" style="padding:10px;">内容2 $...
接下来，让我们看一个简单的代码示例，展示如何动态添加和操作标签页： ```csharp private void Form1_Load(object sender, EventArgs e) { // 添加新的标签页 TabPage tabPage1 = new TabPage("标签页1"); ...
总之，`TabHost`是Android早期创建标签页界面的常见方式，虽然现代开发中已不常用，但它仍然是理解Android界面设计和交互逻辑的重要一环。通过学习`TabHost`，开发者可以更好地理解Android界面组件的使用，为后续...
本篇文章将探讨如何利用jQuery实现一个简单的标签页功能，适用于网页内容的组织和导航。我们将参考给定的文件名，如`index.html`, `tab1.html`到`tab4.html`以及`index.js`，来解释这一实现过程。 首先，`index....
JQ Tab是基于JQuery构建的一种动态切换标签页的组件，它通过简单的HTML结构和少量的JavaScript代码，就能实现美观且交互性强的标签页效果。这个组件的核心功能包括标签页的创建、激活、切换等操作，使得开发者无需...
4. **CSS样式**：美化标签页，使其看起来简单、大方。 5. **数据格式**：服务器可以返回HTML片段或者JSON数据，根据实际需求选择。 **三、Ajax标签页实例分析** 在提供的文件列表中，我们可以看到以下几个关键文件...
在这个例子中，我们简单地获取了当前选中的视图，但你可以根据需要进行更复杂的交互，比如根据选中的标签页加载不同的数据或执行特定操作。 总结起来，创建MFC应用中的标签页涉及以下步骤： 1. 在对话框资源中添加...
在本实例中，我们将学习如何简单地使用Bootstrap框架实现一个基本的标签页功能。 首先，Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发者快速构建响应式、移动设备优先的网页。...
在提供的代码片段中，我们可以看到一个简单的标签页（tabs）布局。通过`<div>`和`<ul>`元素，定义了标签页的导航和内容区域。每个标签页的导航项由`<li>`元素表示，而内容则被封装在`<div>`元素中，并通过CSS的`...
MFC事件驱动模型使得用户与标签页和面板之间的交互变得简单。使用ON_BN_CLICKED、ON_WM_LBUTTONDOWN等消息映射宏，可以响应按钮点击、鼠标点击等事件，实现相应的功能。 6. **自定义样式和主题** MFC支持Windows...
css+jquery实现最简单标签页效果html代码，效果很好
以上就是一个简单的多标签页实现。Bootstrap的多标签页功能支持动态添加、删除和切换，可以轻松地与其他Bootstrap组件结合使用，如卡片、表格等。此外，还可以通过添加额外的类名，如`.justify-content-center`或`....
下面是一个简单的示例，展示如何使用jQuery打开一个新标签页： ```javascript $('a[target="_blank"]').click(function(event) { event.preventDefault(); // 阻止默认的链接行为 var url = $(this).attr('href')...
总之，AngularJS提供的两种实现标签页的方式各有千秋，普通指令简单直观，适用于快速搭建和基础的标签页功能；而自定义指令则提供了更强的自定义能力和复用性，适合开发更复杂的标签页组件。开发者可以根据项目的...
在这个项目中，开发者可能自定义了这个功能，使得每个标签页对应一个独立的页面，而不是简单的内容区域切换。 实现多标签页面打开，我们需要处理以下几个关键点： 1. **标签创建**：当用户点击链接或者执行特定...
下面将详细讨论标签页切换效果及其在网页开发中的实现方式。 首先，我们要理解标签页的基本结构。一个典型的标签页系统包括一个容器，内部包含若干个可切换的“标签页”和对应的“内容区域”。每个标签页都有一个...