简单标签页实现

最新推荐文章于 2023-04-18 09:36:23 发布
最新推荐文章于 2023-04-18 09:36:23 发布
阅读量156 收藏
点赞数
分类专栏： JavaScript 文章标签： 百度 JavaScript XHTML CSS C ViewUI

<!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  οnlοad="goto(1,2,3,4)" scroll="no">
<div id="tab">
 <h3 id="hh1" οnclick="goto(1,2,3,4)"  >新浪</h3>
 <h3 id="hh2" οnclick="goto(2,1,3,4)">网易</h3>
 <h3 id="hh3" οnclick="goto(3,1,2,4)">百度</h3>
 <h3 id="hh4" οnclick="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>

zh_1123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表单标签实现简单的登陆页面
m0_61464684的博客
04-23 1415
登陆页面
一个简单的Web标签页
Yu_Web的博客
11-07 2457
基于jQuery的tag标签设计
标签页实现方法
phyllis_icic的博客
02-05 1119
第一次写标签页特别头疼，因为是小白啥也不会，最后通过一个中间页面进行跳转实现。最近又遇到一个，要做标签页，要求三个页面的数据分别对应数据库内同一张表的同一条字段不同内容，那我之前的办法就不好使，反复尝试，反复失败，最后心肥意冷的我求助公司大佬才做出来…… 今天我就把两种方法罗列出来，希望当跟我一样的菜鸟，也遇到这个问题不会急的跟我一样抓耳挠腮 方法一：效果图：（适用于两个标签页无关联，各自
Vue开发实例（16）之创建标签页
编程界明世隐的博客
05-19 4289
Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！ 导航 ✪  Vue开发实例目录总索引 ◄ 上一篇【15】动态路由的实现 ► 下一篇【17】待更新 先创建一个标签 创建vue页面 Tabs.vu
【设计思考】多层级tab选项卡展示方式
设计の诗
02-29 8936
在后台管理系统的设计中，往往会遇到多层级的查询与展示。如何能更直观地展示数据，并且让用户体验更佳，是在设计过程中需要仔细考虑的问题。 举个例子 现有一个管理系统的原型图如下，共有5个层级，选择数据时，需要一层一层选择。可以看出，原型图中的tab层级虽然清晰，但视觉效果欠佳，尤其是前三层，由于都是横向选择标签，没有辨识度。 解决方法 经过一番思考和对比，确定了一个比较好的展示方式——横纵交错。如第...
Vue3标签页（Tabs）
Mr Dear的博客
04-18 6078
选项卡切换组件，可靠左，居中或者滚动展示标签页。
vue-pc后台管理系统：实现标签页(二)
我的博客
11-24 2504
1.el-main的标签页，和左侧菜单进行联动 动态增减标签页 静态初始页面 <el-main> <el-tabs v-model="activeTab" type="card" @tab-click="tabClick" @tab-remove="tabRemove" > <el-tab-pane :closab
简单实现Bootstrap标签页
08-31
主要教大家简单实现Bootstrap标签页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery实现简单的tab标签页效果
10-21
在本文中，我们将深入探讨如何使用jQuery来实现一个简单的tab标签页效果。这个效果涉及到jQuery的基本元素遍历、样式动态操作以及事件处理等技术。首先，我们来看一下HTML结构： ```html <li class="current">...
css+jquery实现简单标签页效果html代码
04-16
css+jquery实现最简单标签页效果html代码，效果很好
4种超酷Tabs选项卡设计效果
12-11
这是一组非常实用的Tabs选项卡设计效果。这组选项卡同4之后效果，分别为基本选项卡，彩色带图标的选项卡，下划线样式选项卡和垂直选项卡。这些选项卡样式简洁大方，兼容IE8，非常实用。
AngularJS 打开新的标签页实现代码
10-19
在AngularJS中，有时我们需要实现一个功能，当用户点击某个按钮时，系统会在新的浏览器标签页中打开一个新的页面。这个需求通常出现在导航或者链接跳转的场景中，以提供更好的用户体验。本文将详细讲解如何使用...
JavaWeb实战开发
05-01
本课程详细讲解了以下内容：    1.jsp环境搭建及入门、虚拟路径和虚拟主机、JSP执行流程    2.使用Eclipse快速开发JSP、编码问题、JSP页面元素以及request对象、使用request对象实现注册示例    3.请求方式的编码问题、response、请求转发和重定向、cookie、session执行机制、session共享问题     4.session与cookie问题及application、cookie补充说明及四种范围对象作用域     5.JDBC原理及使用Statement访问数据库、使用JDBC切换数据库以及PreparedStatement的使用、Statement与PreparedStatement的区别     6.JDBC调用存储过程和存储函数、JDBC处理大文本CLOB及二进制BLOB类型数据     7.JSP访问数据库、JavaBean(封装数据和封装业务逻辑)     8.MVC模式与Servlet执行流程、Servlet25与Servlet30的使用、ServletAPI详解与源码分析     9.MVC案例、三层架构详解、乱码问题以及三层代码流程解析、完善Service和Dao、完善View、优化用户体验、优化三层（加入接口和DBUtil）    1 0.Web调试及bug修复、分页SQL（Oracle、MySQL、SQLSERVER）     11.分页业务逻辑层和数据访问层Service、Dao、分页表示层Jsp、Servlet     12.文件上传及注意问题、控制文件上传类型和大小、下载、各浏览器下载乱码问题     13.EL表达式语法、点操作符和中括号操作符、EL运算、隐式对象、JSTL基础及set、out、remove     14.过滤器、过滤器通配符、过滤器链、监听器     15.session绑定解绑、钝化活化     16.以及Ajax的各种应用     17. Idea环境下的Java Web开发
标签页 html实现原理,JS实现标签页效果(配合css)
weixin_35843523的博客
05-31 602
实现的效果：如上图所示为制作的标签页，我们想要实现的效果是当鼠标移到某一个标签的时候，在下面的内容区显示对应的内容，并且相应标签的颜色需要改变，如图中所示当前鼠标的位置在“标签1”上，则内容区域显示的内容为“我是内容1”，并且“标签1”的颜色要比“标签2”和“标签3”深一些，同样鼠标移到“标签2”和“标签3”的时候显示“我是内容2”和“我是内容3”。这样的效果是CSS和JS配合实现的。下面我们就来...
tab 标签页实现
贵在坚持
02-16 8017
标签页功能是一个比较常用的功能。虽然很多前端框架、插件都带有若干种标签页的功能实现，我依然觉得掌握其基本实现会更有利于我们对这个功能的理解，我们也可以更容易地根据实际情况进行修改。 以下代码示例是一个比较常见的实现： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;t...
推荐一款简洁的浏览器标签页
weixin_50894115的博客
02-14 1137
公众号：不喝水就犯困（后台回复电影名即可在线看电影）
tab标签页的实现，简易版
qq_33205354的博客
06-01 1620
代码很简单，就是先设置好自己的tab标签页的样式，然后用js控制显示和隐藏，当然最开始就要把第一个面板显示，其余面板隐藏，因为只有点击鼠标的时候才会触发事件；循环把所有面板隐藏，当点击一个标签页，就把对应的内容设置为显示，即可实现&lt;style&gt;                        ul li{                list-style: none;         ...
超级简单的标签页
qq_38674970的博客
12-18 317
非常简单的标签页，在会了轮播图后，只是把小数字的那些改改就行了。不懂的话可以看看我前面的那篇轮播图。。估计都懂的
winfrom 界面实现标签页
最新发布
07-31
WinForms是一个用于创建Windows应用程序的框架，可以通过使用其中的控件和布局管理器来设计和构建用户界面。要实现标签页界面，可以使用TabControl控件。 TabControl控件是WinForms中的一种容器控件，它允许在一个窗体中创建多个标签页，并允许用户通过点击标签页来切换显示内容。要使用TabControl控件实现标签页界面，可以按照以下步骤进行操作： 1. 确保在WinForms应用程序中引入了System.Windows.Forms命名空间，该命名空间提供了TabControl控件的定义。 2. 在窗体中拖动和放置一个TabControl控件，该控件将作为标签页的容器。 3. 在TabControl控件上右键单击，选择“添加标签页”或者直接双击控件，会添加一个默认的标签页Tab1。 4. 可以选择重命名或删除标签页，也可以添加更多的标签页。 5. 对于每个标签页，可以在其上添加其他控件，例如文本框、按钮等，以构建具体的界面内容。 6. 根据需要，可以使用布局管理器来调整和排列控件，使其适应标签页的大小和布局需求。 7. 还可以使用属性窗口来进一步自定义TabControl控件和其中的标签页的外观和行为，例如更改字体、背景色、选项卡的显示位置等。 通过上述步骤，即可在WinForms应用程序中实现一个简单的标签页界面。同时，TabControl控件还提供了一些事件（如选择标签页改变事件），可以通过编写事件处理程序来添加更多的交互逻辑。 需要注意的是，以上只是实现标签页界面的基本过程，具体的界面设计和功能实现还需根据实际需求进行进一步开发和完善。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值