tab 标签卡 效果 源码

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量879 收藏
点赞数
分类专栏： UI html+css+js 文章标签： javascript class xhtml scroll float asp


源码如下：

<!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>
<TITLE>仿网易TAB标签</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
BODY {
FONT-SIZE: 14px; }
OL LI {
MARGIN: 8px
}
#con {
FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px
}
#tags {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 400px; PADDING-TOP: 0px; HEIGHT: 23px
}
#tags LI {
BACKGROUND: url(/jscss/demoimg/200904/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px
}
#tags LI A {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(/jscss/demoimg/200904/tagright.gif) no-repeat right bottom; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999;LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION: none
}
#tags LI.emptyTag {
BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px
}
#tags LI.selectTag {
BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px
}
#tags LI.selectTag A {
BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px
}
#tagContent {
BORDER-RIGHT: #aecbd4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #aecbd4 1px solid;PADDING-TOP:1px; BORDER-BOTTOM: #aecbd4 1px solid; BACKGROUND-COLOR: #fff
}
.tagContent {
PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; BACKGROUND: url(/jscss/demoimg/200904/bg.gif) repeat-x; PADDING-BOTTOM: 10px; WIDTH: 576px; COLOR: #474747; PADDING-TOP: 10px; HEIGHT: 250px
}
#tagContent DIV.selectTag {
DISPLAY: block
}
</STYLE>
</HEAD>
<BODY>
<DIV id=con>
<UL id=tags>
  <LI><A onClick="selectTag('tagContent0',this)" 
  href="javascript:void(0)">源码爱好者</A> </LI>
  <LI class=selectTag><A onClick="selectTag('tagContent1',this)" 
  href="javascript:void(0)">ASP源码</A> </LI>
  <LI><A onClick="selectTag('tagContent2',this)" 
  href="javascript:void(0)">自适应宽度的标签</A> </LI></UL>
<DIV id=tagContent>
<DIV class=tagContent id=tagContent0>提供开源编程源码、电子书及技术文档、JavaScript/CSS特效代码以及常用软件下载等。</DIV>
<DIV class="tagContent selectTag" id=tagContent1>这时是ASP标签的内容。</DIV>
<DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV></DIV></DIV>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
// 标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 标签内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</SCRIPT>
</BODY>
</HTML>

swofmengtian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ITAB「iTab」-crx插件
03-23
简约标签，选择适合自己的标签页 iTab是一款基于Html5的Chrome浏览器扩展应用。它提供了网站快速拨号、扩展应用快捷访问等功能来增强 Chrome 原生新标签页（New Tab）。 ============================== 版本：1.2.3 更新日期: 2017-04-14 1. 每日更新背景图片； 2. 修复多个关键词搜索的错误； ============================== 版本：1.2.2 更新日期: 2015-10-07 1.修复删除导航链接出错的bug ============================== 版本：1.2.1 更新日期: 2015-09-30 1. 添加 Google 和 bing 搜索引擎； 2. 修改搜索框样式； ============================== 版本：1.2 更新日期: 2015-09-23 1. 增加搜索提示功能； ============================== 版本：1.1 更新日期: 2015-08-18 1. 增加壁纸切换，让导航页不再单调； 2. 修改部分样式； 3. 修复部分Bugs. 支持语言:中文 (简体)
iTab-crx插件
04-02
语言:中文 (简体) 简约标签，选择适合自己的标签页 iTab是一款基于Html5的Chrome浏览器扩展应用。它提供了网站快速拨号、扩展应用快捷访问等功能来增强 Chrome 原生新标签页（New Tab）。==============================版本：1.2.3 更新日期: 2017-04-141. 每日更新背景图片；2. 修复多个关键词搜索的错误；==============================版本：1.2.2 更新日期: 2015-10-071.修复删除导航链接出错的bug==============================版本：1.2.1 更新日期: 2015-09-301. 添加 Google 和 bing 搜索引擎；2. 修改搜索框样式；==============================版本：1.2 更新日期: 2015-09-231. 增加搜索提示功能；==============================版本：1.1 更新日期: 2015-08-181. 增加壁纸切换，让导航页不再单调；2. 修改部分样式；3.
兼顾美观和实用的标签页插件——iTab
xdlumia的博客
11-04 488
兼顾美观和实用的标签页插件——iTab闲来网上冲浪，被b站一个视频的标题吸引：“【【良心巨制】我一个人肝出来的iTab新标签页，可能是2022年最值得期待的浏览器扩展了-哔哩哔哩】”（视频链接：https://b23.tv/2v5hcom）。平时爱在b站看各路大神的视频的我，一方面想看一下“肝”出来的标签页有多牛，另一方面也着实苦于没有一个称心的浏览器起始标签页，点进了这个视频。简单的了解后，我安装并使用了一天，下面来给大家分享一下这款浏览器插件。外观相信大多数朋友的童年伴随着被初始标签页支配的恐惧，那会儿
可添加删除修改等操作的web tab栏，原生js html css源码
sfafoa的博客
03-19 1102
话不多说，先上图： 当点击右侧的加号，会自动动态创建新的一个选项，如下图： 当点击标签右上角的叉号，会删除选项栏： 双击tab栏某一选项栏，可以更改选项栏的内容，如下图： 接下来废话不多说了，上源码： htnl机构： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa...
【花雕学AI】32：WeTab——使用 ChatGPT 聊天的新标签页，免费又好用
雕爷学编程
05-08 9122
WeTab 是一款免费的浏览器扩展，它可以让你用小组件自定义你的新标签页，让它变成你想要的样子。WeTab 的暗黑模式让你可以根据不同的场合和时间来调整你的新标签页的颜色，让它更加美观，更加节能。你还可以调整它们的位置和大小，让你的新标签页更美观，更方便。WeTab 是一个简单方便的新标签页扩展，它可以让你用小组件自定义你的新标签页，支持暗黑模式，整合了 ChatGPT 组件。
javascript tab标签 不规则TAB选项卡效果源码
05-18
javascript tab标签 不规则TAB选项卡效果源码
基于JavaScript实现TAB标签效果
11-22
js实现tab标签效果，在项目中经常用到，今天抽点时间把我写的js实现tab标签效果源码分享给大家，对js tab标签代码需要的朋友参考下 废话不多说了，直接给大家贴代码了： <html> <head> <meta ...
ASP.NET网页Tab选项卡控件源码及示例
03-16
内容索引:.NET源码,控件组件,选项卡,控件　一个用C#编写的用于网页的TAB选项卡控件源代码，并附有一个使用示例，包括在静态环境下的一个HTML示例，TAB选项卡如图示，效果很不错，部分功能使用了JQUERY配合，这使得...
jquery ajax tab选项卡特效代码
03-20
jquery ajax tab选项卡是一款通过鼠标点击导航条标签选项卡滑动切换，内容异步加载选项卡切换；简单的网页模板单页选项卡切换展示。
[源码]Android开发 漂亮底部Tab栏 标签 选项卡制作教程
09-28
效果查看、教程地址：http://blog.csdn.net/juyangjia/article/details/9616299
随写--2.使用WeTab新标签页定制属于你的新标签页
周那个胡 的博客
05-20 1047
Hello~大家好，最近好久没见了，因为学业原因，没更新。今天叫你们白嫖ChatGPT和一个好看的标签页！
个人开发作品分享：iTab新标签页
weixin_43232905的博客
11-03 5243
我是前端工程师，因为用了很多浏览器默认起始页，要么广告太多，要么呆板无趣，都满足不了我对美观和实用兼顾的需求，所以就自己动手做了一个。前后我一个人从设计产品到前后端开发连着熬夜肝了一个多月上架了这个iTab新标签页，没想到意外收获了非常多用户喜欢，稳定版上线10天下载就超四千。说实话，我完全没想到会有这么多人跟我一样，苦浏览器起始页不好用久矣。 也许你在用Infinity new tab，但我还是建议你快速浏览一下 iTab标签页web版，你不会后悔的。 iTab标签页是什么？ iTab标签页是一款浏览器插
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 658
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 769
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 41
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1221
vue2,vuex,vant组件库
[email protected]使用懒加载
weixin_44072254的博客
04-25 214
【代码】[email protected]使用懒加载。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 198
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
CSR、SSR与同构渲染全方位解析
Allen-
04-26 1470
现代Web应用的核心渲染方式——客户端渲染（CSR）、服务器端渲染（SSR）以及同构渲染。接下来我们将通过对比它们的原理、应用场景、优缺点及实际案例，深入了解如何根据项目需求选择合适的渲染策略。
jQuery实现tab标签滑动切换效果
05-25
以下是一个简单的jQuery实现tab标签滑动切换效果的示例代码： HTML结构： ```html <div class="tab-wrap"> <ul class="tab-nav"> <li class="active">Tab1 <li>Tab2 <li>Tab3 <li>Tab4 <div class="tab-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值