js实现简单的选项卡

最新推荐文章于 2023-02-06 19:42:02 发布
最新推荐文章于 2023-02-06 19:42:02 发布
阅读量384 收藏
点赞数 2
分类专栏： 杂记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44114279/article/details/106996362
版权 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
 text-align: center;
 }
 nav li{
 display: inline;
 width: 24%;
 text-decoration: none;
 padding: 15px;
 }
 li:hover{
 background-color: lightblue;
 }
 section{
 height: 300px;
 }
 </style>
</head>
<body>
<!--导航栏部分HTML代码-->
<nav id="nav">
 <ul>
 <li class="act">选卡1</li>
 <li>选卡2</li>
 <li>选卡3</li>
 <li>选卡4</li>
 </ul>
</nav>
<!--内容部分HTML代码-->
<div id="container">
 <section class="tab" style="background-color: tomato">内容1</section>
 <section class="tab" style="background-color: cyan">内容2</section>
 <section class="tab" style="background-color: blueviolet">内容3</section>
 <section class="tab" style="background-color: gold">内容4</section>
</div>
<script>
 window.onload=function () {
 var nav=document.getElementById('nav');
 var oNav=nav.getElementsByTagName('li');

 var container=document.getElementById('container');
 var oDiv=container.getElementsByClassName('tab');
 for(var i=0;i<oNav.length;i++){
 oNav[i].index=i;
 oNav[i].onclick=function () {
 for(var i=0;i<oNav.length;i++){
 oNav[i].className='';
 oDiv[i].style.display="none";
 }
 this.className='act';
 oDiv[this.index].style.display="block"
 }
 for(var m=1;m<oNav.length;m++){
 oNav[m].className='';
 oDiv[m].style.display="none";
 }
 }
 };
</script>
</body>
</html>

效果图

在这里插入图片描述
在这里插入图片描述

勾勾g
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用JS实现简单选项卡功能
TianXuab的博客
07-01 970
函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。在以上示例中，通过定义。在以上示例中，通过定义。
JS实现选项卡功能
最新发布
qingdouxiaohua的博客
09-19 668
这里有3个按钮，点击哪个按钮出现哪个按钮的内容，再点的话内容的就取消了。这也是一个很好玩的一个小功能。
操作元素之修改样式属性
leechoy
06-12 629
<!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-UA-Compatible" content="ie=edge"> <title>..
JS简单选项卡
XiaoYu0543的博客
07-01 485
一个简单的选项卡功能，小白勿喷谢谢 ，希望能帮助到大家
使用JavaScript实现选项卡
weixin_51688356的博客
02-06 577
点击选项卡时内容随之改变，实现点击选项卡切换。
js实现简单选项卡制作
10-14
在本文中，我们将探讨如何使用JavaScript实现一个简单的选项卡组件。选项卡是一种常见的用户界面元素，用于组织和展示多个相关的但不同时显示的内容块。在这个例子中，我们将创建一个包含HTML、CSS和JavaScript三个...
js实现简单选项卡功能
01-19
本文为大家分享了js实现简单选项卡功能的具体代码，供大家参考，具体内容如下 首先我们来写HTML代码，构建出整体结构 代码如下： <!--导航栏部分HTML代码--> 选卡1 选卡2 选卡3 选卡4 <!--内容...
JS实现简单tab选项卡切换
12-13
本文实例为大家分享了JS实现简单tab选项卡切换的具体代码，供大家参考，具体内容如下 本人在上一篇文章也写了用JS来实现tab选项卡切换效果，但是上次的那个代码比较复杂，这次是简化版的。 <!DOCTYPE html> <...
js简易选项卡-简单易用
12-30
js简易选项卡
简单纯js实现网页tab选项卡切换效果
11-14
简单纯js实现网页tab选项卡切换效果，简单，实用，方便
基于JavaScript实现选项卡效果
01-21
一个简单的选项卡的关键在于：当切换页面时，如何让所选的选项和与其对应的内容同时出现，并且在选择其他的内容时，不影响新的内容的显示。 其中用到两个很关键的思想： 1.为对象增加index属性，并通过this对index 的调用来使每个选项能显示出所对应的内容，并且属性值要设置为循环时的数值-i。 2.通过对class（类）的灵活使用，来改变当先所选中目标的样式。 3、用for循环嵌套事件对每一项进行遍历。 4、在编译时，位于body中的div和input要有预先定义的行内样式或者信息。 5、button和div.style.display要同时清零，同时出现才能达到选项卡的目的。
JS特效(菜单选项卡)
02-28
JS 特效制作的特效JS 特效制作的特效JS 特效制作的特效JS 特效制作的特效
js简易选项卡
06-10
一款非常简单的tab标签切换代码，只需一段非常简易的js代码即可实现，简单不复杂，很轻巧，懒人之家推荐下载
html+js实现简单的选项卡
weixin_41257700的博客
03-13 285
Document 新闻招聘广告 第一个选项卡的内容区域，111111 第二个选项卡的内容区域，222222222 第三个选项卡的内容区域，333333 ![在这里插入图片描述](https://img-blog.c...
JavaScript 做一个简单的选项卡
MW
04-03 195
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style> #box{ margin: 0 auto; pa...
JS简单实现选项卡的切换
龙城飞马将的博客
07-09 771
效果描述如下：  当鼠标悬浮到某个选项卡时即为当前选项卡，并展示对应选项卡的内容。代码如下：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;随便&lt;/title&gt; &lt;style&gt;
纯JS实现的简单tab选项卡切换效果
热门推荐
Handsome_fan的博客
04-22 1万+
本人在上一篇文章也写了用JS来实现tab选项卡切换效果，但是上次的那个代码比较复杂，这次是简化版的。 Tab效果 ul{ list-style: none; } *{ margin: 0; padding: 0; } #tab{ border: 1px solid #ccc; margin: 20px auto; width
（16）JS实现简单的选项卡
虚心求学_一点一滴
05-26 3011
思路：
js实现tab选项卡切换
05-17
下面是一个简单的实现示例： HTML代码： ```html <div class="tab"> <button class="tab-btn active" data-tab="tab1">选项卡1</button> <button class="tab-btn" data-tab="tab2">选项卡2</button> <button class="tab-btn" data-tab="tab3">选项卡3</button> </div> <div class="tab-content" id="tab1"> <p>这是选项卡1的内容</p> </div> <div class="tab-content" id="tab2"> <p>这是选项卡2的内容</p> </div> <div class="tab-content" id="tab3"> <p>这是选项卡3的内容</p> </div> ``` CSS代码： ```css .tab-btn { background-color: #ccc; border: none; color: #fff; padding: 10px; cursor: pointer; } .active { background-color: #f00; } .tab-content { display: none; } ``` JavaScript代码： ```js // 获取所有选项卡按钮 const tabBtns = document.querySelectorAll(".tab-btn"); // 获取所有选项卡内容 const tabContents = document.querySelectorAll(".tab-content"); // 循环遍历每个选项卡按钮 tabBtns.forEach((btn) => { // 添加点击事件监听器 btn.addEventListener("click", () => { // 移除所有选项卡按钮的 active 类 tabBtns.forEach((btn) => { btn.classList.remove("active"); }); // 给当前点击的选项卡按钮添加 active 类 btn.classList.add("active"); // 隐藏所有选项卡内容 tabContents.forEach((content) => { content.style.display = "none"; }); // 显示与点击按钮对应的选项卡内容 const tabId = btn.getAttribute("data-tab"); document.getElementById(tabId).style.display = "block"; }); }); ``` 解释一下，首先我们通过 `querySelectorAll` 方法获取到所有选项卡按钮和选项卡内容的元素，然后循环遍历每个选项卡按钮，给它们添加点击事件监听器。当点击某个选项卡按钮时，我们先移除所有选项卡按钮的 `active` 类，再给当前点击的选项卡按钮添加 `active` 类。接下来，我们隐藏所有选项卡内容，然后根据点击按钮的 `data-tab` 属性值，找到与之对应的选项卡内容，将它的 `display` 样式属性设为 `block`，以显示该选项卡内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值