纯dom 选项卡js框架 -1

zzwar zzwar 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1k累计阅读 1.1k平均单平台 已同步平台 CSDN 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄17年
关注
原创 最新推荐文章于 2026-02-06 15:07:01 发布 1k 阅读 AI 写同款· GEO 优化 ›
AI权益加码！Claude Code、Cursor等20+工具免费用！ 购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！ 阅读详情

我写了个简单的选项卡框架 dom.js  使用代码如下  


<!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=utf-8" />
<title>选项卡</title>
<style type="text/css">
<!--先解析float overflow 定位 自身 颜色类 -->
*{margin:0px;padding:0px}
.tab{float:left; width:500px; height:300px;overflow:hidden;cursor:pointer;}
.tab ul{float:left;margin:0px;padding:0px;width:500px;list-style:none;}
.tab ul li { display:block;float:left;width:80px;background:#0099cc;margin:0 4px 0 0;font:12px/30px "宋体";text-align:center;border-top-left-radius: 10px;border-top-right-radius: 10px;
}
.tab .content{clear:both;float:left;width:500px;height:300px;border:1px solid green;background:blue;display:none}
.tab .selectedLi{background:#0FF;}
.tab div.selecteDiv{background:#0FF;display:block;}
</style>
<script type="text/javascript" src="dom.js"></script>
</head>
<body>
<div id="tab0" class="tab"> 
   <!-dddd->

<ul id ="ul" class=''>

<!--默认显示的li 的class 定义->

<li class="selectedLi" >选项1</li>
<li  >选项2</li>
<li >选项3</li>
<li >选项4</li>
<li >选项5</li>
</ul>

<!---默认显示的div 的class 定义->
<div class="content selecteDiv">内容1

</div>

<!--默认隐藏的div 的class 定义 --->

<div class="content">内容2</div>
<div class="content">内容3
<ul id ="ul">
<li class="selectedLi" >选项1</li>
<li  >选项2</li>
<li >选项3</li>
<li >选项4</li>
<li >选项5</li>
<ul/>
</div>
<div class="content selecteDiv">
<div>11111111<li>xxxxxxx</li></div>
<div>11111111</div>
<div>11111111</div>
</div>
<div class="content">内容4</div>
<div class="content">内容5</div>
</div>
</body>
<script type="text/javascript">

window.onload =function (){

    //调用传个元素id

   dom.tabBind('tab0');
}
</script>

</html>

效果如图

dom.js 参见下篇文章

收录于
DOM操作

当前文章被收录于：

DOM操作
3 篇文章 0 人学习
订阅专栏 查看详情
标签
#框架 #class #float #xhtml #function
#div
本内容遵循 CC 4.0 BY-SA 版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
JavaScript 网页简洁TAB选项卡实现教程 Selenium：支持多种浏览器和编程语言的自动化测试框架，可以用于创建回归测试。Puppeteer：一个Node库，它提供了一套高级API来控制Chrome或Chromium浏览器，非常适合进行自动化测试。 阅读详情

相关推荐

打造自定义图片滑动选项卡：原生JS插件教程

事件监听是Web开发中不可或缺的一部分，它允许开发者为特定的事件定义响应行为。这些事件可能包括用户交互，如点击、悬停、按键，或是由浏览器触发的事件，如加载完成或错误发生。原生JavaScript通过方法提供了一种机制来添加事件监听器，使得开发者能够对这些事件做出反应。在前端开发中，事件监听不仅可以使网页更加动态，还可以提升用户体验。例如，在一个选项卡组件中，我们需要监听点击事件以切换不同的视图或内容。

weixin_42186387的博客 811

Dom--选项卡的实现

2. 由于通过类名字取到的元素是一个数组，所以我们绑定点击事件需要用循环来实现，我们想让点击的按钮为active样式，那么我们先默认阿让所有按钮的都为正常样式（不为active的普通样式），同样我们想让对应的文本框输出对应的内容，那我们默认让其都先隐藏掉（list类）；我们需要在btns中新定义一个属性取名index如下边定义，当点击的时候，在当前循环把其赋值给index属性，我们可以通过this来取到当前点击的按钮的索引值然后来赋值给list。3.到这里我们所有的按钮都为默认样式，文本框内容都隐藏掉了；

m0_72694993的博客 318

纯JavaScript打造网页Tab选项卡效果的完全指南

Tab选项卡是用户界面（UI）组件的一部分，通常位于内容区域的顶部，以水平或垂直的方式排列。它们的设计初衷是为了简化信息的展示，使用户可以快速在不同的信息板块之间切换，而不必加载新的页面。这样既节省了时间，又提高了网站的加载效率。HTML（HyperText Markup Language）是构建网页的骨架，而标签是构成HTML文档的基本单位。在创建Tab选项卡时，我们会使用到一些基础标签，例如<div><a><span>等，它们各自扮演着不同的角色。<div>

weixin_28729843的博客 1052

选项卡，dom基础和几个方法

1.选项卡 <div class="wrapper"> <button class="active">姓名</button> <button>年龄</button> <button>住址</button> <div class="content" style="display:block">张三</div>

weixin_52484354的博客 248

Javascript之DOM实现选项卡功能

定义： DOM定义了表示和修改文档所需的方法，DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和Xml功能的一类对象的集合，也有人称DOM是对HTML以及XML的标准编程接口。 下面我们实现一个简单的选项卡功能： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...

gxgalaxy 751

DOM初探（2）——选项卡

视频：https://ke.qq.com/course/231577?taid=3983676656552089 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>abraham</title> ...

abraham的博客 8229

如何快速利用js的dom操作实现选项卡功能

在这里利用到了闭包和立即执行函数 &lt;!DOCTYPE html&gt; &lt;html lang='em'&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;dom初探&lt;/title&gt; &lt;style type="text/css"&gt; .content

丰柏林的博客 477

纯dom 选项卡js框架 -2

代码如下dom.js: var dom = {}; //获得元素字节点 dom.getNodes = function(a,tag){ var len = arguments.length; if (len == 0) { alert("没传参数"); return; } if(len == 2){ var tag = tag.toUpperCase(); } var olis =

zzwar的专栏 1302

JS实现tab选项卡切换的效果

今天给大家实现一个简单的需求,纯原生js实现选项卡切换的效果,即当鼠标移入某个div区域时,显示不同的内容。先来看一下效果图： 一、HTML页面布局 提示: 选项卡标题使用ul..li 选项卡内容使用div 二、CSS样式制作 提示: 整个选项卡的样式设置 选项卡标题的样式设置 选项卡内容的样式设置 一开始只显示一个选项卡内容，其它选项卡内容隐藏。 三、JS实现选项卡切换...

aiwen001的博客 2万+

js实现选项卡

选项卡在网页中经常使用，那么如何实现选项卡呐？ 现在的框架省去dom操作，开发者只需要关注数据即可，那么真的不需要操作dom了吗，是需要的，只不过程序已经帮忙做了这件事，纯粹的数据逻辑也将前端变得更难了。 整体结构 <div class="app" id="app"> <div class="key-left"> <div class="tap">1</div> <div class="tap">2</div>

qq_52440306的博客 7295

html+css+js实现选项卡效果

一开始想的是直接css+js写死，但是这样js和css、html就不能够很好的分隔开，而且拓展性很差。 如果是进行一个迭代的项目，后期需要修改选项卡时，就会比较麻烦，所以应该要思考如何能将html、css、js尽量分隔开，并且提高拓展性 思路：     将选项卡的css效果单独取出来，JS判断是哪一个选项卡点击，就将css样式替换成被选中的，而未被点击的就恢复默认样式 代码

jiasanwan的博客 1625

DOM 操作实战｜原生 JS 实现 6 个高频交互效果（选项卡 / 轮播图等，附源码 + 注释）

本文介绍6个原生JS实现的DOM交互效果，涵盖点击、悬浮、轮播和表单验证等常见场景。通过HTML+CSS+JS三步法，详细讲解querySelector、addEventListener、classList等核心API的使用技巧。案例包括选项卡切换、手风琴折叠、导航高亮、商品卡片动画、轮播图和表单验证，每个案例都提供完整代码和实现逻辑。文章特别强调新手常见误区，如事件绑定方式、样式修改优先级和定时器管理等，并给出优化建议。最后提出进阶方向，如事件委托、动态节点操作和组件封装，帮助开发者夯实DOM操作基础，为

qq_32528275的博客 1433

html自动式选项卡js,js实现简单选项卡功能

本文为大家分享了js实现简单选项卡功能的具体代码，供大家参考，具体内容如下首先我们来写HTML代码，构建出整体结构代码如下：选卡1选卡2选卡3选卡4内容1内容2内容3内容4注：section 部分添加了style，目的是方便演示，为规范HTML与css的代码风格，不推荐这样使用。接着我们使用css代码构建出样式代码如下：*{text-align: center;}nav li{display: i...

weixin_30364031的博客 458

js原生实现简易tap选项卡

简易js原生tap选项卡 tap选项卡我们可以在各大网站遇见，今天说一下js原生实现tap选项卡。 首先我们要完成的效果图，如下：点击导航栏不同项的时候通过不刷新页面以及不加载其他页面实现内容的切换。 通过应用jQuery框架$(":eq(index)")方法可以轻而易举的实现这个功能，当然要先引入jQuery文件 <div class="row"> <ul> ...

A1690363967的博客 2727

纯CSS实现新浪网页的横向选项卡

自己用CSS实现了一个横向选项卡，这是当时看到新浪首页的选项卡之后，觉得效果不错，就做了一个类似的小组件。

m0_37899540的博客 1496

JS实现选项卡效果

选项卡这个效果估计以后的项目会经常涉及到，对代码还是半熟练的情况下还是写下来吧。 先来布局一个简单的页面：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;pa

liujian573281的博客 1万+

js实现简单的选项卡~

##js做一个简易的选项卡 js联动太麻烦 一个简单的选项卡给宁看 首先是我的思路↓ 思路 a)先让所有隐藏,再让当前显示出来 b)涉及到一组一堆 所有 操作用 for循环 c) 循环里面加事件，事件里面i值不能用 解决办法:在每一个元素身上添加一个i值 接下来是style部分↓ #box button.ac{ ...

Jackewe的博客 1940

原生JS实现选项卡

文章目录案例描述HTML代码全部HTML代码展示HTML代码分解 ----头部HTML代码分解 ----内容CSS样式JS实现代码全部JS代码显示JS代码分解 ----头部样式改变JS代码分解 ----内容改变 案例描述 在浏览器中显示一个选项卡界面，头部为1、2、3、4、5。点击头部任意一个数字，都在下方显示出不同的信息，并且鼠标停留在任意一个数字上时，数字的颜色改变。案例如下图所示 默认的是...

qq_45473786的博客 1594

【JavaScript】实现网页中的选项卡

总体而言，此代码允许选项卡式导航，单击选项卡将激活它并显示其相应的内容。//this表示当前点击的这一个项目，该索引用于标识 oHeaderItems 和 oBoxItems 中的相应项。// for 循环用于从 oHeaderItems 和 oBoxItems 中的所有项中的active。// 点击第一个选项卡时，将点击效果添加到自身，并从第二个选项卡中删除点击效果。// 点击第二个选项卡时，将点击效果添加到自身，并从第一个选项卡中删除点击效果。//给当前选中的选项卡加上active。

qq_55930097的博客 1190
下一篇： 纯dom 选项卡js框架 -2
点赞 0
评论 0
书签 书签 0
zzwar
zzwar
博客等级 码龄17年 1粉丝 4原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值