简单Tab选项卡的切换

最新推荐文章于 2020-09-19 11:19:16 发布
最新推荐文章于 2020-09-19 11:19:16 发布
阅读量293 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44541165/article/details/86569021
版权

开发工具与关键技术：DW,JS
作者：邓伟征
撰写时间：2019年2月20日
Tab选项卡切换效果是在网页中的常见效果，实现它的方法也很简单。
首先设置选项1显示，其他选项隐藏在这里插入图片描述
然后再给他设置高亮效果
在这里插入图片描述
之后声明变量，绑定点击事件，设置active
在这里插入图片描述
在这里插入图片描述

额么么
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript tab选项卡切换
猿码互联
05-29 453
函数来处理选项卡按钮的点击事件。函数首先隐藏了所有选项卡内容，然后显示当前选项卡的内容。同时，它还在当前选项卡按钮上添加了一个。下面是一个简单的JavaScript代码示例，展示如何使用tab选项卡来切换内容。此示例中，我们使用了一个。
【JS】tab选项卡切换
chaomi_didi的博客
10-16 325
一、代码思路 1、用户可视步骤一：点击li后显示高亮背景。 鼠标点击每一个li时需先排他，避免出现其他都显示成current样式。 代码主要步骤： 1）新建li点击后的样式 current； 2）for 循环对所有li注册点击事件; 3）for 循环排他； 4）当前点击li获得新样式：this.className = ‘current’; 2、用户可视步骤二：点击li后，显示当前点击li对应的item content。需排他，避免已被显示的content一直显示。 代码主要步骤： 1）对li元素设置自定义属
tab选项卡切换
weixin_43549976的博客
09-19 190
tab选项卡切换 方法一： attr() 设置或返回被选元素的属性，接收两个参数，如果是两个参数则是将第二个参数设置为id值 <style> .active { width: 300px !important; background: pink; box-shadow: -18px 6px 8px 0 rgba(0, 0, 0, 0.20); margin-left: -50px; border-radius: 4
Tab选项卡切换
bang_2018的博客
12-24 260
Tab选项卡切换类型 点击切换 滑动切换 实现选项卡的切换，可以用JS来实现对页面CSS隐藏和显示形式的控制，从而达到切换的效果。下面介绍点击切换，滑动切换原理一样，只需把JS中onclick改成onmouseover 页面布局： 布局分成选项卡标题和内容两部分： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta cha...
jQuery简单实现tab选项卡切换效果
10-22
主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。
JS实现简单tab选项卡切换
12-13
本文实例为大家分享了JS实现简单tab选项卡切换的具体代码，供大家参考，具体内容如下 本人在上一篇文章也写了用JS来实现tab选项卡切换效果，但是上次的那个代码比较复杂，这次是简化版的。 <!DOCTYPE html> <...
bootstrap实现tab选项卡切换
10-14
`data-toggle="tab"`是触发选项卡切换的关键数据属性。 选项卡内容被包裹在`<div class="tab-content">`中，每个`<div role="tabpanel" class="tab-pane">`代表一个选项卡的面板，`id`应与链接中的`href`匹配，并且...
js实现tab选项卡切换功能
10-20
在JavaScript中实现tab选项卡切换功能是一项常见的网页交互设计任务，它能够为用户提供更好的浏览体验。本示例代码详细展示了如何使用纯JS来创建一个简单的选项卡切换效果，主要包括以下几个关键知识点： 1. HTML...
Tab选项卡的切换
weixin_44538083的博客
02-17 1529
开发工具与关键技术DW，CSS，JavaScript 作者：陈梅 撰写时间：2019年2月17日 现在分享的是我以前老师布置的一份作业里的技术，Tap选项卡的切换，这个技术又是一个JavaScript鼠标点击事件，我们来看看代码部分的布局 | | | 在这里我用的是ul和li做好排列表格，也可以用th、td样式来定义的。列好五个按钮和五个选项，再用a标签使鼠标移进内容区的字体时可以换色，给按钮...
原生javascript实现Tab选项卡切换功能
11-30
分析个人用原生JS获取类名元素的代码： 代码如下: getByClassName:function(className,parent){             var elem = [],                 node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName(‘*’):document.getElementsByTagName(‘*’),                 p = new RegExp(“(^|\\s)”+className+”(\\s|$)”);         
简单的TAB选项卡
02-04
简单、易懂、易上手、易修改TAB选项卡。新手上路绝技实例。
tab简洁的选项卡
07-29
web前端的tab简洁的选项卡，方便使用，清晰明了，方便直接使用
简单的tab选项卡切换
weixin_44543219的博客
01-31 8539
Tab选项卡切换 我们在网页上经常能看到的一个现象点击某一文字就会跳转出宁一个页面、而在同一个页面中点击头部内容，主体内容也会随之改变。前者是a 标签所实现的效果，而后者则是tab选项卡的切换。接下来我们一起来看看tab选项卡怎么个切换方法： 这是tab选项卡切换的源代码，由于内容较多，所以只截取了大...
前端----Tab选项卡切换
qq_44736123的博客
11-04 877
html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab选项卡切换</title> <link rel="stylesheet" href="css/index.css"> </h...
Tabs选项卡切换
weixin_44540773的博客
07-07 2945
Tabs选项卡切换 开发工具与关键技术：JS 作者：赵纯雨 班级：1803撰写时间：2019.7.5 Tabs选项卡切换，他就是能够在一个页面里面通过点击Tabs选项卡进行切换，从而显示多个内容，点击进到页面之后，一般设的都是第一个标签为第一个页面，在li标签里面添加内容，你需要多少，就添加多少，代码如下： <divclass="layui-tab layui-tab-car...
css html 选项卡
无声街角 无声拥抱
11-25 296
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA...
html tab 选项卡切换代码,JS实现简单tab选项卡切换
最新发布
05-13
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> <div id="tab1" class="tabcontent"> <h3>Tab 1 Content</h3> <p>This is the content of Tab 1.</p> </div> <div id="tab2" class="tabcontent"> <h3>Tab 2 Content</h3> <p>This is the content of Tab 2.</p> </div> <div id="tab3" class="tabcontent"> <h3>Tab 3 Content</h3> <p>This is the content of Tab 3.</p> </div> ``` CSS代码： ``` /* 隐藏所有选项卡内容 */ .tabcontent { display: none; } /* 样式化选项卡按钮 */ .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 { padding: 6px 12px; border: 1px solid #ccc; border-top: none; } ``` 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"; } ``` 以上代码实现了一个简单的选项卡切换效果。点击每个按钮时，会显示对应的选项卡内容，并且激活该按钮。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值