HTML系列：多种方式实现选项卡

最新推荐文章于 2024-05-06 21:05:10 发布
最新推荐文章于 2024-05-06 21:05:10 发布
阅读量1.4k 收藏 7
点赞数 1
分类专栏： HTML系列 CSS系列 文章标签： css3与js多种方式实现选项卡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Josiah_Yuan/article/details/103464271
版权
本文探讨了使用HTML、CSS3和JavaScript实现选项卡的不同方法，通过实例展示了如何创建交互式的选项卡组件，并呈现了最终的运行效果。
摘要由CSDN通过智能技术生成

多种方式实现选项卡

<!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>tab选项卡</title>
    <style>
        * {
   
            margin:0 auto;
            padding:0 auto;
        }
         .tabBox {
   
             margin: 20px auto;
             width:500px;
         }
         .tabBox ul {
   
             position:relative;
             top:1px;
             right:40px;
             /* 相对于之前的位置向下移动1px,使边框重合 */
         }
         .tabBox ul li {
   
            display: inline-block;
            /* 同一行，块标签 */
            margin-right:10px;
            padding:0 10px;
            line-height: 33px;
            border:1px solid #AAA;
            cursor: pointer;
         }
         .tabBox ul li
最低0.47元/天 解锁文章
公子清
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
​HTML选项卡制作
PLCzhongzhi的博客
04-11 3359
当点击标着不同选项的按钮时，会出现相应选项的内容，这是我们要实现的选项卡功能。 方法1：HTML+CSS+JS实现 首先，如图1.1在页面放上几个按钮，并且加上对应想要展示的div（例子中为4个选项）。 图1.1 设置按钮 依次给4个div背景选为不同颜色，并且设置一下样式，能看到图1.2所示结果。 图1.2 按钮样式 用js实现的思路很简单：比如可以先让其他div隐藏，点击第n个按钮的时候再让第n个div出现，且让该按钮样式变成已选中的样子，并默认第一个按钮先按下显示第一个div ，具体步骤如下所示。 1
运用html+css制作选项卡
weixin_65789931的博客
07-18 1108
运用html+css制作选项卡
html 实现tab选项卡
qq_42033668的博客
10-10 4704
【代码】html 实现tab选项卡。
【前端基础小案例】HTML+CSS打造精美选项卡菜单效果_选项卡效果html代码
最新发布
2401_84185182的博客
05-06 492
素材和源码可以在我发布的资源里免费下载，可点击下方链接进行下载。阅读温馨提示：代码注释前面有 “” 标记的即为较之前面修改的代码。
HTML实现单选和多选
qq_52641515的博客
07-08 1万+
HTML如何实现单选和多选
html5卡片效果
Amare丶的部落格
06-08 9823
html5卡片效果
基于Font Awesome图标选项卡特效.zip
07-05
综上所述，"基于Font Awesome图标选项卡特效"是一个融合了Bootstrap、Font Awesome和CSS技巧的网页组件，它不仅提供了一种高效的信息组织方式，还通过图标增强了用户的交互体验，展示了前端开发中的创新与个性化设计...
jQuery彩色动画Tabs选项卡特效.zip
07-11
jQuery彩色动画Tabs选项卡特效是一种常见的网页交互设计，它通过使用JavaScript库jQuery实现了一系列色彩丰富的动画效果，旨在提升用户体验和网站界面的吸引力。这个特效允许用户在不同的内容区域之间轻松切换，每个...
asp.net选项卡
05-11
在ASP.NET中，选项卡可以通过多种方式实现，例如使用内置的AjaxControlToolkit的TabContainer控件，或者使用第三方库如DevExpress、Telerik等提供的选项卡组件。这些控件提供了丰富的功能，包括动态加载内容、自定义...
3款漂亮的ASP.NET环境网页选项卡代码
03-16
在ASP.NET中实现选项卡，通常会用到控件库中的TabControl或者自定义控件。这些选项卡可以实现平滑切换，提高用户体验，并且可以通过Ajax技术进行无刷新更新，进一步提升性能。 Ajax（Asynchronous JavaScript and ...
html tab选项卡实现
01-14
html 及 css 实现的tab选项卡。十分简洁。
HTML选项卡
03-05
HTML选项卡, jquery 选项卡 HTML选项卡, jquery 选项卡
前端小案例——选项卡（HTML+CSS+JS, 附源码）
前端小白一枚
01-24 1307
切换选项卡内容：点击不同的选项卡按钮时，会隐藏之前显示的选项卡内容，并显示当前点击按钮对应的选项卡内容。
在html中选项卡怎么做,html中制作选项卡(tabs)
weixin_39631007的博客
06-03 6335
快速建立一个html选项卡(tabs)在网页中常常会看到这样的标签页，其实实现的方法也不难，接下来就介绍如何快速的建立一个html标签卡 这是我做好的demo预览效果 使用的软件以及技术：sublime text 3编辑器html+cssjQuery1.建立一个html，并写好基本的结构如果你使用的是sublime text 3并安装emmet插件，就可以快速创建了：div>(ul>l...
HTML中tab选项卡制作
Moriarty的专栏
03-06 1万+
这次要做的是tab选项卡，也叫滑动门。具体是什么呢？如图 当我鼠标滑过上边标题栏的某一li时，下边显示的内容进行相应的改变。这个在门户网站经常用到。具体怎么做呢？其实很简单啦，只需要当我鼠标滑过某一标题li时，把下边的对应的div设置为block，其余的设置为display：none就可以了。下面说一下具体实现的细节. HTML部分： 在一个tabs的div里面放一个tabs-t
HTML Tab选项卡
热门推荐
黑码哥的技术博客
07-26 3万+
HTML Tab选项卡 选项卡 公告 规则 完美 功劳
html好看的选项卡样式,纯CSS3超时尚Tabs选项卡流线型标签效果
weixin_36481714的博客
06-03 1645
这是一款效果非常时尚的Tabs选项卡标签的流线型线条效果。该效果使用纯CSS3来制作，效果类似eclipse软件的标签页效果。该Tabs标签使用流线型设计，并且可以自定义标签的颜色，非常实用和好看。使用方法HTML结构该流线型Tabs选项卡标签使用无序列表来制作，外面使用一个div作为包裹容器。Third tabSecond tabFirst tabCSS样式流线型Tabs选项卡的实现方式非常简单...
如何使用HTML制作tab选项卡
weixin_57762639的博客
09-16 3857
共有10个步骤 1.首现我们进入DW 2.我们新建一个html文档，在新建一个css样式文件，将它们放入同一文件夹下。用link标签将css外部样式文件引入HTML文档 3.之后我们给它一个div，设置类名为“bk”，再给5个li标签，给第一个li标签设置一个类 4.然后，我们进入css样式，用通配符*来设置内外边距，在去掉li标签前面自带的圆点，再设置div的宽高 5.再设置li标签的样式，再给我们之前单独设置类的li标签单独设置样式 6.我们再给一个div，设置类名.
使用原生js实现以下效果： 1.实现选项卡动态添加 2.实现选项卡切换 内容区域同步变化 3.实现选项卡删除
06-03
好的，我来为您解答。首先需要一个 HTML 结构，如下： ```html <div class="tab"> <ul class="tab-nav"> <li class="active">选项卡1</li> </ul> <div class="tab-content"> <div class="tab-pane active">选项卡1的内容</div> </div> </div> ``` 然后，我们使用原生 JS 实现以下效果： 1. 实现选项卡动态添加 ```js var tabNav = document.querySelector('.tab-nav'); var tabContent = document.querySelector('.tab-content'); // 添加选项卡 function addTab(title, content) { var index = tabNav.children.length; // 选项卡索引 var li = document.createElement('li'); li.innerText = title; li.setAttribute('data-index', index); // 设置索引 tabNav.appendChild(li); var div = document.createElement('div'); div.classList.add('tab-pane'); div.innerText = content; div.setAttribute('data-index', index); // 设置索引 tabContent.appendChild(div); } addTab('选项卡2', '选项卡2的内容'); ``` 2. 实现选项卡切换 ```js // 切换选项卡 function switchTab(index) { var activeLi = tabNav.querySelector('.active'); var activeDiv = tabContent.querySelector('.active'); if (activeLi) activeLi.classList.remove('active'); if (activeDiv) activeDiv.classList.remove('active'); var li = tabNav.querySelector(`li[data-index="${index}"]`); var div = tabContent.querySelector(`div[data-index="${index}"]`); if (li) li.classList.add('active'); if (div) div.classList.add('active'); } // 点击切换选项卡 tabNav.addEventListener('click', function(e) { var li = e.target.closest('li'); if (li) { var index = li.getAttribute('data-index'); switchTab(index); } }); ``` 3. 实现选项卡删除 ```js // 删除选项卡 function removeTab(index) { var li = tabNav.querySelector(`li[data-index="${index}"]`); var div = tabContent.querySelector(`div[data-index="${index}"]`); if (li) tabNav.removeChild(li); if (div) tabContent.removeChild(div); } // 双击删除选项卡 tabNav.addEventListener('dblclick', function(e) { var li = e.target.closest('li'); if (li) { var index = li.getAttribute('data-index'); removeTab(index); } }); ``` 以上就是使用原生 JS 实现选项卡动态添加、切换和删除的代码。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值