用原生js进行封装函数 实现 选项卡嵌套选项卡 功能

最新推荐文章于 2022-08-06 22:37:59 发布
最新推荐文章于 2022-08-06 22:37:59 发布
阅读量951 收藏 2
点赞数 3
分类专栏： Javascript 文章标签： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/this_name_true/article/details/80601269
版权
这篇博客展示了如何使用原生JavaScript实现一个选项卡切换功能，其中包括了外部选项卡和内部（嵌套）选项卡。通过为每个元素添加事件监听器并动态调整样式，实现了不同内容的显示和隐藏。代码示例详细说明了整个过程。
摘要由CSDN通过智能技术生成

效果如图：





代码如下：


<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title></title>


<body>
<style type="text/css">
body,
ul,
li,
div {
padding: 0;
margin: 0;
list-style: none;
}

.box {
width: 900px;
margin: 0 auto;
border: 1px solid #CCCCCC;
height: 308px;
overflow: hidden;
}

#ul1 {
width: 200px;
float: left;
background: #CCCCCC;
height: 308px;

}

#ul1 li {
height: 77px;
line-height: 76px;
text-align: center;
font-size: 15px;

最低0.47元/天 解锁文章
Lurkers.
关注
专栏目录
jQuery实现Tab选项卡切换效果简单演示
10-23
在本文中，作者详细演示了如何使用jQuery实现Tab选项卡...总之，本文详细讲解了使用jQuery实现Tab选项卡切换效果的原理、步骤和注意事项，并提供了一个实用的插件代码示例，使其他开发者可以容易地理解和复现这一功能。
可嵌套的JS网页选项卡Tabber
12-31
一款非常漂亮的网页选项卡，与普通网页选项卡不同的是，它可以多层嵌套，即选项卡内还可以有选项卡，有JS版的，也有AJAX版的。
选项卡嵌套
Steamgirl的博客
01-30 222
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
js tab 选项卡
01-25
本封装的选项卡功能具有可嵌套和可重复使用的特性，这使得它更灵活，适用于各种复杂的网页布局。 首先，让我们了解一下面向对象编程（OOP）的基本概念。在JavaScript中，尽管它原生并不完全支持面向对象，但可以...
androidtabs:Kivy小部件，尝试重现android选项卡的行为
05-24
Kivy是一个开源Python库，用于构建多平台的触控用户界面，它提供了丰富的自定义小部件来实现类似Android的选项卡功能。在这个项目"androidtabs"中，开发者尝试在Kivy框架下模仿Android的选项卡行为，为用户提供类似...
Bootstrap Tabs选项卡切换代码
06-09
Bootstrap的选项卡功能依赖于JavaScript插件，该插件会监听点击事件并动态修改DOM，显示或隐藏相应的选项卡内容。例如： ```javascript $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('...
选项卡封装
05-28
NULL 博文链接：https://eric-gao.iteye.com/blog/652183
一个封装了的选项卡效果js
02-06
一个封装了的选项卡效果js,一个封装了的选项卡效果js
封装好了的JS选项卡
06-10
封装了一个选项卡，不过已经不像选项卡了-_-!!! 现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些 obj.bind = ["a1","td","b1","div"]; 绑定id="a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？ td标签的数量和div标签的数量必须相同 （若不需要显示内容，只显示菜单话，可以这个在td标签上加<td skip="true">） 如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting obj.nesting = [false,true,"",""]; 当标签tag有嵌套时，需要用到这个 比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就需要用到 菜单嵌套为false，内容嵌套为true，且会自动判断出内容标签，多数时候这样就可以了 判断方法为，认定getElementsByTagName后第一个标签为内容第一项，其他的就用这个第一项的深度来判断 但有些情况下，这样还是不行 我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"]; 这样就肯定不会错了（不明白的话看下例子就简单多了） obj.index = 0; 默认显示第几个选项卡，序号从0开始 obj.style = ["c1","c2","c3"] 菜单加载的样式的className： 菜单未选中的className是c1 菜单选中的className是c2 菜单onmouseover的className是c3 obj.overStyle = false; 选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容]，对应的样式为style[2] obj.overChange = false; 选项卡内容是否用onmouseover, onmouseout直接激活 obj.menu = false; 选项卡是菜单类型 obj.auto = [false, 1000]; 选项卡是否自动播放，播放速度（毫秒） obj.creat(); 开始生成选项卡，需要onclick触发事件的话，可以obj.creat(函数名) 所有的都会触发
内外嵌套在一起联动的网页TAB选项卡.rar
07-10
内外嵌套在一起联动的网页TAB选项卡，似乎本代码更想表现的是两个选项卡标签的互相嵌套作用，外层和内层各一个TAB选项卡，一共有近6个不同的演示页面来演示不同的嵌套选项卡功能，有的还支持记忆（Cookies）功能，不过大部分都是普通的Ajax形式。
js-选项卡套选项卡
AsaZyf的博客
06-06 668
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;body&gt; &lt;style type="text/css"&gt; body, ul, l
【JS学习-封装思想--利用构造函数】以 嵌套选项卡 为例
m0_61486963的博客
08-06 272
【JS学习-封装思想--利用构造函数】以 嵌套选项卡 为例
javascript选项卡嵌套的实现
style201904的博客
05-25 1497
标题 <style> *{margin: 0px;padding: 0px;list-style: none;text-decoration: none;} .box{width: 800px;border: 1px solid #000000;margin: 20px auto;background: blue;} .box:after...
基于Vue.js的二级选项卡（v-for的循环嵌套）（点击横向的选项tab，在纵向显示tab的子选项tabchild，在右边显示子选项卡对应的内容）
羊羊羊羊羊羊羊的博客
05-21 2399
效果：点击横向的选项tab，在纵向显示tab的子选项tabchild，在右边显示子选项卡对应的内容 准备HTML <style> *{ padding: 0; margin: 0; } .box{ width: 100%; height: 100%; position: relative; }
js-选项卡代码
Liangsm_的博客
11-14 488
**javascript 选项卡代码**
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值