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

最新推荐文章于 2019-07-20 15:27:47 发布
最新推荐文章于 2019-07-20 15:27:47 发布
阅读量937 收藏 2
点赞数 3
分类专栏： Javascript 文章标签： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/this_name_true/article/details/80601269
版权

效果如图：





代码如下：


<!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.
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用JS实现简单选项卡功能
TianXuab的博客
07-01 970
函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。在以上示例中，通过定义。在以上示例中，通过定义。
可嵌套的JS网页选项卡Tabber
06-08
一款非常漂亮的网页选项卡，从老外站上收集的，与普通网页选项卡不同的是，它可以多层嵌套，即选项卡内还可以有选项卡，有JS版的，也有AJAX版的。
嵌套的网页选项卡
07-21
嵌套的网页选项卡，菜单加载的样式，tags的各种显示，默认现实，动态现实。 开发人员必备的学习代码和使用代码。
封装好了的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(函数名) 所有的都会触发
js tab 选项卡
01-25
本封装的选项卡功能具有可嵌套和可重复使用的特性，这使得它更灵活，适用于各种复杂的网页布局。 首先，让我们了解一下面向对象编程（OOP）的基本概念。在JavaScript中，尽管它原生并不完全支持面向对象，但可以...
androidtabs:Kivy小部件，尝试重现android选项卡的行为
05-24
Kivy是一个开源Python库，用于构建多平台的触控用户界面，它提供了丰富的自定义小部件来实现类似Android的选项卡功能。在这个项目"androidtabs"中，开发者尝试在Kivy框架下模仿Android的选项卡行为，为用户提供类似...
jquery触屏滑动选项卡切换特效代码
03-20
滑动容器一般用`div`元素包裹，每个选项卡对应一个滑动项，也可以是嵌套的`div`。 3. **初始化Swiper**：在`$(document).ready()`函数内，通过`new Swiper()`创建一个新的滑动实例。配置参数可以自定义滑动效果，如...
Bootstrap Tabs选项卡切换代码
06-09
Bootstrap的选项卡功能依赖于JavaScript插件，该插件会监听点击事件并动态修改DOM，显示或隐藏相应的选项卡内容。例如： ```javascript $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('...
Fragment嵌套使用
03-03
通过以上步骤，你可以实现一个功能丰富的、具有选项卡导航的Fragment嵌套界面。在实际项目中，可以根据需求进行调整和优化，比如添加动画效果、处理触摸事件等，以提供更出色的用户体验。不断实践和学习，你将能更好...
一个封装了的选项卡效果js
02-06
一个封装了的选项卡效果js,一个封装了的选项卡效果js
纯js多重嵌套tab切换效果
06-09
效果描述： ui设计比较简洁，堪称简陋 因为设计效果已经比较早了 但是其代码还是非常好用，值得推荐的，希望对懒人有所帮助 使用方法： 1、将style.css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可
多层嵌套选项卡
weixin_30608503的博客
09-26 382
<!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> ...
boostrap双重tab嵌套结构
花神的博客
06-16 7004
在项目开发中我们有时候会遇到，双层tab嵌套的情况，如果直接写的话有些麻烦，但是利用boostrap却可以十分轻松的实现，大大的解放我们的生产力，这样我们就可以将宝贵的时间用在玩游戏这样的正确道路上了，想想还有点小激动。 &amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp
JavaScript实现选项卡（三种方法）
weixin_33831673的博客
09-02 306
本文实例讲述了js选项卡的实现方法。 一、html代码： <div id="div1"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <...
js-选项卡代码
Liangsm_的博客
11-14 476
**javascript 选项卡代码**
选项卡套选项卡
黎小小的博客
07-20 1046
1.需求： 实现大选项卡套小选项卡；大选项卡切换同时小选项卡也进行切换，且每次大选项卡的切换是在小选项卡切换完后进行； 2.分析： 大的外层的选项卡； 大的选项卡内部有一个小的选项卡； 功能： 自动切换； 鼠标经过切换 3.实现方案分析： 方案一：（不可行）开两个定时器，一个控制外层选卡，一个控制内层选卡。仔细分析发现，外层选项卡的切换是需要在内层选卡全部切换完后再进...
关于利用HTML5和CSS3实现盒子的拖拽移动到另一盒子发生颜色和标题的变化效果的实现原理
this_name_true的博客
09-12 1794
效果图如下：       代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;拖拽&lt;/title&gt; &lt;script type="text/javascript" src=&quo
实现JavaScript 原生选项卡
最新发布
06-13
好的，下面是一个简单的JavaScript原生选项卡实现： HTML部分： ```html <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button> <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button> <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button> <div id="tab1" class="tabcontent"> <h3>Tab 1 Content</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div id="tab2" class="tabcontent"> <h3>Tab 2 Content</h3> <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="tab3" class="tabcontent"> <h3>Tab 3 Content</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> </div> </div> ``` CSS部分： ```css .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } ``` JavaScript部分： ```javascript function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } ``` 解释： 通过 HTML 中的按钮元素和对应的内容区域，通过 JavaScript 的事件监听实现点击按钮显示对应的内容区域的功能。其中，openTab 函数接收两个参数，分别是事件对象 evt 和对应的选项卡名称 tabName。在函数内部，通过循环遍历所有内容区域和按钮元素，将它们的样式 display 设为 none，将所有按钮元素的类名中的 active 替换为空格。然后再将对应的内容区域样式 display 设为 block，将对应的按钮元素的类名中加上 active 样式，以示当前选中状态。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值