js实现简单选项卡

最新推荐文章于 2023-07-01 18:20:34 发布
最新推荐文章于 2023-07-01 18:20:34 发布
阅读量267 收藏 1
点赞数
分类专栏： web前端 文章标签： 选项卡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_one/article/details/102728919
版权

js实现简单选项卡

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
</head>
<style>
    .box{
    
        width:600px;
        height: 600px;
        border: 1px solid #000;
        position: relative;
        margin: 50px auto;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-content: center;
    }
    .box1{
    
        width: 100%
最低0.47元/天 解锁文章
笑问客从何处来
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript如何实现 选项卡功能
qq_60504665的博客
11-11 294
首先我们这里有五个li，获取过来的li元素是以伪数组的形式输出的，所以我们可以用for循环来遍历这个伪数组为每个li添加单击事件，接下来就是写函数了，这里就要用到上面所讲的排他思想，试想我们每点击一次li都像是点击上面的按钮一样，我们用for循环去掉他的样式，然后再给当前点击的li加上样式，这样的话，所点击的li就会有红色背景和白色的字了，但是下面的内容还是不变的。这里我们首先分成两大步，第一步先获取元素，我就不多说了。有五个按钮，我想让每点击一个按钮，这个按钮就会变成红色，代码可以这样写。
JS简单选项卡
XiaoYu0543的博客
07-01 487
一个简单的选项卡功能，小白勿喷谢谢 ，希望能帮助到大家
利用JS实现简单选项卡功能
最新发布
TianXuab的博客
07-01 971
函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。在以上示例中，通过定义。在以上示例中，通过定义。
js实现选项卡
qq_52440306的博客
09-23 6921
选项卡在网页中经常使用，那么如何实现选项卡呐？ 现在的框架省去dom操作，开发者只需要关注数据即可，那么真的不需要操作dom了吗，是需要的，只不过程序已经帮忙做了这件事，纯粹的数据逻辑也将前端变得更难了。 整体结构 <div class="app" id="app"> <div class="key-left"> <div class="tap">1</div> <div class="tap">2</div>
js实现简单的选项卡~
Jackewe的博客
10-22 1839
##js做一个简易的选项卡 js联动太麻烦 一个简单的选项卡给宁看 首先是我的思路↓ 思路 a)先让所有隐藏,再让当前显示出来 b)涉及到一组一堆 所有 操作用 for循环 c) 循环里面加事件，事件里面i值不能用 解决办法:在每一个元素身上添加一个i值 接下来是style部分↓ #box button.ac{ ...
js简易选项卡制作
TTO_OTT的专栏
03-17 789
今天使用JavaScript写一个简易的选项卡，性能不优化 Js简易选项卡 * { margin: 0px; padding: 0px; } div#wrap { margin: 50px auto; width:604px; } #item {
js实现简单的拖拽
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
07-29 257
<!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-...
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的一个简单选项卡
03-06
html+css布局，使用原生javascript点击触发选项卡，简单实用一看就会；
js简易选项卡-简单易用
12-30
js简易选项卡
使用JS实现简单的选项卡功能
热门推荐
Max的博客
08-17 1万+
首先我们来写HTML代码，构建出整体结构 &amp;amp;amp;n
js做一个简单的选项卡
rt5476238的博客
01-09 332
&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; .btns input.cur{/*这是按钮的样式*/ background-colo
js选项卡的简单功能实现
lyhh5的博客
09-04 1413
js选项卡的简单功能实现 首先在html中写出基本结构 <ul> <li style=" background-color: red;">aa <div style="display: block; background-color: red;" >111</div>//默认显示的div ...
JS实现简单的选项卡效果
qq_35442152的博客
04-22 233
原生js简单选项卡的实现，利用自定义属性 HTML代码： <div id="main"> <ul> <li class="current">1</li> <li>2</li> <li>3</li> &...
js中简易选项卡的实现（3种方法实现样式的封装）
袅袅青烟散的博客
09-29 4669
清除浮动的三种方式1.overflow: hidden; 清除子元素的浮动对父元素的影响 2.clear: both; 清除哥哥元素的浮动对弟弟元素的影响 3.:after{ display: block; content: “”; clear: both; }基本样式代码<!doctype html> <html lang="en"> <head> <meta charset="UT
（16）JS实现简单的选项卡
虚心求学_一点一滴
05-26 3012
思路：
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、付费专栏及课程。

余额充值