标签页

最新推荐文章于 2024-05-21 07:00:00 发布
最新推荐文章于 2024-05-21 07:00:00 发布
阅读量164 收藏
点赞数
文章标签： JavaScript Windows HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guhan123456/article/details/83725358
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0052)http://www.sharejs.com/code/windows/tab3/index.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>三种简洁的Tab导航（网页选项卡）简析 - 分享JavaScript-sharejs.com</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>BODY {
PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
DIV {
PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
UL {
PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
LI {
PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
BODY {
TEXT-ALIGN: center; FONT: 12px "宋体"
}
A:link {
COLOR: #00f; TEXT-DECORATION: none
}
A:visited {
COLOR: #00f; TEXT-DECORATION: none
}
A:hover {
COLOR: #c00; TEXT-DECORATION: underline
}
UL {
LIST-STYLE-TYPE: none
}
.main {
TEXT-ALIGN: center; PADDING-BOTTOM: 8px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; CLEAR: both; PADDING-TOP: 8px
}
#tabs0 {
BORDER-BOTTOM: #cbcbcb 1px solid; BORDER-LEFT: #cbcbcb 1px solid; BACKGROUND-COLOR: #f2f6fb; WIDTH: 400px; HEIGHT: 200px; BORDER-TOP: #cbcbcb 1px solid; BORDER-RIGHT: #cbcbcb 1px solid
}
.menu0 {
WIDTH: 400px
}
.menu0 LI {
TEXT-ALIGN: center; PADDING-BOTTOM: 4px; PADDING-LEFT: 0px; WIDTH: 100px; PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND: #ffffff; FLOAT: left; CURSOR: pointer; PADDING-TOP: 4px
}
.menu0 LI.hover {
BACKGROUND: #f2f6fb
}
#main0 UL {
DISPLAY: none
}
#main0 UL.block {
DISPLAY: block
}
#tabs1 {
TEXT-ALIGN: left; WIDTH: 400px
}
.menu1box {
POSITION: relative; TEXT-ALIGN: left; WIDTH: 400px; HEIGHT: 22px; OVERFLOW: hidden
}
#menu1 {
Z-INDEX: 1; POSITION: absolute; TOP: 0px; LEFT: 0px
}
#menu1 LI {
TEXT-ALIGN: center; LINE-HEIGHT: 21px; WIDTH: 72px; DISPLAY: block; FLOAT: left; HEIGHT: 21px; CURSOR: pointer
}
#menu1 LI.hover {
BORDER-LEFT: #333 1px solid; BACKGROUND: #fff; BORDER-TOP: #333 1px solid; BORDER-RIGHT: #333 1px solid
}
.main1box {
BORDER-BOTTOM: #333 1px solid; BORDER-LEFT: #333 1px solid; MARGIN-TOP: -1px; WIDTH: 400px; HEIGHT: 181px; CLEAR: both; BORDER-TOP: #333 1px solid; BORDER-RIGHT: #333 1px solid
}
#main1 UL {
DISPLAY: none
}
#main1 UL.block {
DISPLAY: block
}
.menu2box {
POSITION: relative; TEXT-ALIGN: left; WIDTH: 400px; BACKGROUND: #ffffff; HEIGHT: 22px; OVERFLOW: hidden
}
#tabs2 {
BORDER-BOTTOM: #cbcbcb 1px solid; BORDER-LEFT: #cbcbcb 1px solid; BACKGROUND-COLOR: #f2f6fb; WIDTH: 400px; HEIGHT: 200px; BORDER-TOP: #cbcbcb 1px solid; BORDER-RIGHT: #cbcbcb 1px solid
}
#tip2 {
Z-INDEX: 0; POSITION: absolute; LINE-HEIGHT: 22px; WIDTH: 100px; BACKGROUND: #f2f6fb; HEIGHT: 22px; TOP: 0px; LEFT: 0px
}
#menu2 {
Z-INDEX: 1; POSITION: absolute; TOP: 0px; LEFT: 0px
}
#menu2 LI {
TEXT-ALIGN: center; PADDING-BOTTOM: 4px; PADDING-LEFT: 0px; WIDTH: 100px; PADDING-RIGHT: 0px; DISPLAY: block; FLOAT: left; CURSOR: pointer; PADDING-TOP: 4px
}
</STYLE>

<SCRIPT>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
if(n!=0 && m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
document.getElementById("tip"+m).style.left=n*100+'px';
document.getElementById("main2").innerHTML=m3[n];
}
//-->
</SCRIPT>

<META name=GENERATOR content="MSHTML 8.00.7600.16625"></HEAD>
<BODY><BR><BR><!--第一种形式-->
<DIV id=tabs0>
<UL id=menu0 class=menu0>
<LI class=hover οnclick=setTab(0,0)>新闻 </LI>
<LI οnclick=setTab(0,1)>评论 </LI>
<LI οnclick=setTab(0,2)>技术 </LI>
<LI οnclick=setTab(0,3)>点评 </LI></UL>
<DIV id=main0 class=main>
<UL class=block>
<LI>新闻列表</LI></UL>
<UL>
<LI>评论列表</LI></UL>
<UL>
<LI>技术列表</LI></UL>
<UL>
<LI>点评列表</LI></UL></DIV></DIV><BR><BR><!--第二种形式-->
<DIV id=tabs1>
<DIV class=menu1box>
<UL id=menu1>
<LI class=hover οnmοuseοver=setTab(1,0)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">新闻</A> </LI>
<LI οnmοuseοver=setTab(1,1)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">评论</A> </LI>
<LI οnmοuseοver=setTab(1,2)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">技术</A> </LI>
<LI οnmοuseοver=setTab(1,3)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">点评</A>
</LI></UL></DIV>
<DIV class=main1box>
<DIV id=main1 class=main>
<UL class=block>
<LI>新闻列表</LI></UL>
<UL>
<LI>评论列表</LI></UL>
<UL>
<LI>技术列表</LI></UL>
<UL>
<LI>点评列表</LI></UL></DIV></DIV></DIV><BR><BR><!--第三种形式-->
<DIV id=tabs2>
<DIV class=menu2box>
<DIV id=tip2></DIV>
<UL id=menu2>
<LI class=hover οnmοuseοver=nowtab(2,0)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">新闻</A> </LI>
<LI οnmοuseοver=nowtab(2,1)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">评论</A> </LI>
<LI οnmοuseοver=nowtab(2,2)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">技术</A> </LI>
<LI οnmοuseοver=nowtab(2,3)><A
href="http://www.sharejs.com/code/windows/tab3/index.html#">点评</A>
</LI></UL></DIV>
<DIV id=main2 class=main>新闻内容 </DIV></DIV><BR><BR>
<DIV align=center>
<SCRIPT language=javascript
src="三种简洁的Tab导航（网页选项卡）简析%20-%20分享JavaScript-sharejs_com_files/720.js"></SCRIPT>
<BR><BR>获取更多JavaScript代码，请登录JavaScript分享网 <A
href="http://www.sharejs.com/">http://www.sharejs.com/</A> </DIV></BODY></HTML>
guhan123456
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
标签页（Bootstrap）
海涛高软
01-05 424
FR:海涛高软（QQ技术群：386476712）
html的标签页,标签页.html
weixin_39971132的博客
06-28 662
标签页.nav-tabs {border: none;}.panel-primary,.panel-default{margin: 15px 0;}.panel-primary .nav-tabs>li>a ,.panel-default .nav-tabs>li>a{border-bottom-color: transparent;color: #183464;}.pan...
【软件工具 】非常好用的浏览器新标签页合集
最新发布
Lee大哲博客
05-21 1428
非常好用的浏览器新标签页合集
html-标签页
weixin_34309543的博客
11-09 192
<template> <div class="pos-frame"> <div class="pos h100"> <div class="pos-right"> <div class="tab-wrap"> <input type="radio" id=...
Navigation-Tabs标签页
hrbsfdxzhq01的博客
01-04 626
Tabs 标签页:分隔内容上有关联但属于不同类别的数据集合。 1、基本使用 Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value（v-model） 属性来指定当前选中的标签页。 el-tabs 1、v-model绑定的变量值（与tab-pane的name属性对应）决定哪个选项卡选中 2、tab-click事件：tab 被选中时触发    回调参数是被选中的标签 tab ...
【NGUI】标签页
编程记录，亲测有效
05-02 1094
NGUI的标签页不用写代码，拖拖控件就能完成，当然，首次使用不熟悉可能要找N久。 导入了NGUI之后，先NGUI->Create->2D UI，切到2D界面，你会发现有个超大的Camera图标，在中央，非常不和谐。选择Gizmos，将3D Gizmos调到最小。此Camera则能隐藏掉，可以愉快地创建UI了。 之后，创建按钮，你会发现在NGUI中没有创建Button的选项。因为NGUI的按
简单实现Bootstrap标签页
08-31
Bootstrap标签页是网页设计中常用的一种交互元素，用于组织和展示多块内容，用户可以通过点击不同的标签切换查看不同部分的信息。在本实例中，我们将学习如何简单地使用Bootstrap框架实现一个基本的标签页功能。 ...
ajax标签页
12-07
**Ajax 标签页技术详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在Web开发中，Ajax被广泛用于创建更快速、更交互式的用户界面，比如“ajax标签...
多标签页自适应页面，可以动态的添加删除
05-17
在IT行业中，多标签页设计是一种常见的用户界面（UI）技术，尤其在网页浏览器、桌面应用和各种软件中广泛使用。这种设计允许用户同时打开并切换多个页面或工作空间，提高了工作效率并减少了屏幕空间的浪费。标题“多...
简单标签页实现
03-01
【简单标签页实现】是一个关于在软件开发中创建和管理多标签界面的技术主题。这个话题主要涉及用户界面设计，特别是那些需要在单个窗口中切换多个页面或文档的应用程序，如浏览器、代码编辑器或者文本编辑器。在本文...
Infinity 新标签页
05-28
Infinity 新标签页——一个美观简洁、高效、可定制的新的标签页。Infinity新标签页是一款基于html5的Chrome扩展程序，它重新定义了您的Chrome新标签页。相比Chrome自带的新标签页，您可以通过Infinity自定义添加自己...
标签页效果
天涯~的博客
02-22 741
一个标签页的小实例： tab.html： jQuery实例：标签页效果 标签1 标签2 标签3 我是内容1 我是内容2 我是内容3 tab.css： ul,li { margin :0; padding:0; list-s
前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）
weixin_46001736的博客
08-25 7548
前端：html实现页面切换、顶部标签栏（可删、可切换，点击左侧超链接出现标签栏）
vue实现单页面多标签页
ying940718的博客
04-03 1万+
不废话先上效果图 实现上面的效果，主要是通过改变vue的路由机制实现的 在router目录文件下新建TabRouter.js文件，添加以下内容 const route = Object.create(null) route.install = function (vue) { // 第一个字符串是 组件名，第二个是组件路径，第三个是包名(如果不指定则已1.js,2.js....n.j...
google设置在新标签页打开的方法
热门推荐
科大云炬
01-30 6万+
外国人的习惯和国人就是不一样，喜欢在同一个标签页覆盖打开标签页，所以chrome浏览器默认的也是新标签页覆盖旧标签页，这和我们国人的习惯大相径庭，我们喜欢在不同标签页打开多个链接，而不是后退来前进去的。 虽然可以通过鼠标滚轮或cirt+左键在新标签页打开链接打开链接，但是也过于繁琐，这几天纠结于于这个问题，搜索查阅各种方法和插件终于不负苦心人找到了一个实用简单有效的方法可以点击链接后使谷歌浏览器
html标签页图标
weixin_34006468的博客
01-08 1162
 在head标签加入如下内容： 1 &lt;!--可以在收藏夹中显示出图标--&gt; 2 &lt;link rel="Bookmark" type="image/png" href="images/tab.png" /&gt; 3 &lt;!--可以在地址栏中显示出图标--&gt; 4 &lt;link rel="icon" type="image/
bootstrap简单应用便签页
bobo1356的博客
01-05 1042
效果图如下： 代码： 标签页 .container{ padding: 50px; text-align: center; } .feature { padding: 30px 0; } .fe
一个简单的Web标签页
Yu_Web的博客
11-07 2462
基于jQuery的tag标签设计
chrome垂直标签页
03-29
Chrome垂直标签页是一种Chrome浏览器的扩展功能，它可以将标签页在浏览器窗口的侧边以垂直方式显示，而不是传统的水平方式。这个功能可以帮助用户更好地组织和管理多个标签页，提高工作效率。 通过安装Chrome垂直标签页扩展，你可以将标签页列表显示在浏览器窗口的一侧，以便更容易查看和切换标签页。这样，你就可以同时打开多个网页，并且可以快速切换到需要的标签页，而不必在水平方向上滚动或者使用标签页栏。 此外，Chrome垂直标签页还提供了一些其他的功能，例如： 1. 标签页分组：可以将相关的标签页分组，方便进行管理和切换。 2. 标签页搜索：可以通过关键字搜索标签页，快速找到需要的网页。 3. 自定义设置：可以根据个人喜好调整垂直标签页的显示方式和样式。 总之，Chrome垂直标签页是一个方便的浏览器扩展，可以帮助用户更好地组织和管理多个标签页，提高工作效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值