TAB切换两种方法

最新推荐文章于 2023-08-08 09:41:16 发布
最新推荐文章于 2023-08-08 09:41:16 发布
阅读量1k 收藏
点赞数 2
分类专栏： 前端 文章标签： javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xu_chenpeng/article/details/111183362
版权

展示一下 tab切换。

// css/html
<body>
<div class="big_div">
        <ul id="ul">
            <li class="cssActive">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>   
        <div class="right_div" id="right_div">
            <div class="active"><h1>1</h1></div>
            <div><h1>2</h1></div>
            <div><h1>3</h1></div>
            <div><h1>4</h1></div>
        </div>     
    </div>
</body>


css:
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .big_div{
        width: 100%;
        height: 100vh;
        display: flex;
        background: aquamarine;
    }
    li{
        width: 300px;
        height: 60px;
        line-height: 60px;
        background: cadetblue;
        border: 1px solid black;
        text-align: center;
        font-size: 35px;
        cursor: pointer;
    }
    .right_div{
        flex: 1;    
    }
    .right_div>div{
        display: none;
    }
    .right_div .active{
        display: block;
    }
    .cssActive{
        background: chartreuse;
    }
</style>

// removeAttribute,setAttribute方法
var lis = document.getElementById("ul").children;
        var divs = document.getElementById("right_div").children;

        for(let i=0 ; i<lis.length ; i++){
            lis[i].onclick = function(){
                for(let j=0 ; j<lis.length ; j++){
                    lis[j].removeAttribute("class");
                    divs[j].style.display = "none"
                }
            lis[i].setAttribute("class","cssActive")
            divs[i].style.display = "block";
            }
        }
//classList方法
var lis = document.getElementById("ul").children;
        var divs = document.getElementById("right_div").children;

        for(let i=0 ; i<lis.length ; i++){
            lis[i].onclick = function(){
                for(let j=0 ; j<lis.length ; j++){
                    lis[j].classList.remove("cssActive");
                    divs[j].style.display = "none"
                }
            lis[i].classList.add("class","cssActive")
            divs[i].style.display = "block";
            }
        }
xu_chenpeng
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JavaScript】前端必学的tab栏切换布局分析，覆盖所有面试知识点
m0_60721823的博客
04-16 776
但是在上例中我们获取的是元素属性值，并不是自定义属性值。另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。（2） element.getAttribute(‘属性’) //主要获得自定义的属性（指程序员自己定义的属性）（2） element.setAttribute(‘属性’) //主要设置自定义的属性（指程序员自己定义的属性）想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。
几种项目中常用的tab选项卡切换
最新发布
qq_43766059的博客
08-10 3022
页面上方循环获取标签信息，超出屏幕宽度时可滑动，点击标签时，下方数据随标签切换，当前选中标签样式改变；页面下方可左右滑动切换，当前展示页面数据与上方标签相对应，要求当前页面高度根据获取数据列表长度改变，当前页面无数据时，按要求展示无数据提示。
三种方法实现tab栏切换（CSS方法、JS方法、Vue方法）
lbcbjtlhmjq的博客
08-08 5938
给下图的静态页面添加tab栏切换效果。
tab切换的实现
qq_41386300的博客
05-30 1398
tab切换就是鼠标放在某个标签上下面显示的就是该标签相关的内容，效果如下 当鼠标放在电影上显示的是电影内容，放在电视上显示的是电视内容，放在综艺上显示的是综艺内容， 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ta...
最简单的Tab切换
baidu_41601299的博客
04-16 1万+
HTML <div class="main"> <div class="btn"> <!-- Tab标题 --> <span class="active spanList">课程介绍</span> <span class="spanList">用户故事</spa...
Tab切换5种方法
weixin_34174422的博客
10-08 301
李老师用了三天的时间把Tab切换的效果讲给我们，感觉从中学到了很多很多，李老师的讲课一如既往的棒，从他身上学的的不仅仅是技术，更多的是思想。 通过Tab切换我们学到：函数，数组，for循环，if语句，this关键字。其中this关键字是最重要的，this关键字第一层含义就是指向当前对象。下面我就总结一下this关键字： <scripttype="text/...
vue 实现tab切换保持数据状态
10-15
补充一下，Vue中的动态组件是实现Tab切换的一种常见方式。通过`<component :is="currView"></component>`可以动态地根据`currView`的值切换不同的组件。在`<keep-alive>`包裹下，这些组件的状态可以得到保持： ```...
安卓实现首页tab切换（两种方式）
09-29
本文将详细介绍两种实现方法：一种基于`RadioGroup`，另一种使用普通`Button`。 首先，我们来看`RadioGroup`实现Tab切换的方式。`RadioGroup`是一个可以容纳多个`RadioButton`的容器，当用户选择一个`RadioButton`...
[QT]实现Tab键切换控件的两种方式及禁止Tab切换的简单方法
06-14
本篇文章将深入探讨如何实现Tab键切换控件的两种方式以及如何简单地禁止这种切换。 1. **手动设置Tab键顺序** 在QT中，可以通过`setTabOrder()`函数来手动设定控件间的Tab键切换顺序。例如，如果你有两个`...
CSS实现导航条Tab切换的三种方法介绍
12-09
导航条Tab在页面中非常常见，本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示，先规定几个定义，上图的模块整体叫做导航，由导航标题和导航内容组成。要实现上图所示的布局效果，有两种布局方法：语义...
微信小程序实现tab切换效果
08-28
微信小程序实现tab切换效果是小程序开发中的一种常见交互方式，通过点击不同的tab项，可以实现在不同的内容页面之间进行切换。下面将详细介绍微信小程序实现tab切换效果的方法。 一、前言 微信小程序是一种基于...
sb-admin2-sidebar-toggle-collapse:Bootstrap SB Admin2の侧边栏切换折叠
06-29
sb-admin2-sidebar-toggle-collapse 我修改了 SB Admin2，这是 Bootstrap 的管理主题。 顶部菜单固定固定顶部导航栏 侧边菜单的展开和收缩（？）Sidebar Toggle 详情请参阅以下博客。 许可证等遵循原始 SB Admin2。
tab页切换（项目全靠你啦）
01-06
tab页切换
JS tab栏切换
每天一个前端小知识~
08-28 4998
问题： 当我们点击下面相应的选项时，选项背景颜色和内容会跟随变化 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab切换</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; }
最简洁实用的tab切换，tab选项卡
xllily11的袅袅
03-05 264
/*===========所有 tab选项卡 更换显示样式=====================*/          function setTab(m,n){         var tli=document.getElementById("menu"+m).getElementsByTagName("span");         var mli=document.g...
Windows 10 修改 Alt+Tab 键 切换 新版 Microsoft Edge 单个标签页/窗口
热门推荐
小阮的博客
08-30 5万+
微软已经确认，用户能够在应用程序、Edge 浏览器标签页之间进行切换。在 Windows 10 Build 20161 中，微软已经更新了 Alt+Tab 的默认行为，切换界面中包括了 Microsoft Edge 的标签页面（Chromium版本）。 虽然，将 Alt+Tab 快捷方式和 Edge 浏览器标签页组合能够提高工作效率，但是当你打开太多的标签页和应用窗口的时候，Alt+Tab 视图就会变得有点拥挤 微软允许用户自定义交互体验，用户可以在设置中选择以下几个选项 ● 打开窗口和 Edge 浏览器中
用四种不同的方法实现 tab栏切换
q2211164的博客
05-27 1053
基础片段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
论tab切换的几种实现方法
ala9527的博客
10-16 231
　　tab切换在网页中很常见，故最近总结了4种实现方法。 　　首先，写出tab的框架，加上最简单的样式，代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8...
vue中实现tab切换内容，使用哪种方法最好
06-13
在 Vue 中实现 tab 切换内容有多种方法，其中比较常用的有以下几种： 1. 使用 `v-show` 或 `v-if` 指令 这是最简单的一种方法，通过 `v-show` 或 `v-if` 指令来判断当前选中的 tab，然后对应显示或隐藏对应的内容。例如： ```html <div> <button @click="activeTab = 'tab1'">Tab1</button> <button @click="activeTab = 'tab2'">Tab2</button> <button @click="activeTab = 'tab3'">Tab3</button> </div> <div v-show="activeTab === 'tab1'">Tab1 Content</div> <div v-show="activeTab === 'tab2'">Tab2 Content</div> <div v-show="activeTab === 'tab3'">Tab3 Content</div> ``` 2. 使用 `v-bind:class` 指令 通过 `v-bind:class` 指令来给选中的 tab 添加一个激活状态的 CSS 类，然后根据这个类来控制对应的内容的显示或隐藏。例如： ```html <div> <button :class="{ 'active': activeTab === 'tab1' }" @click="activeTab = 'tab1'">Tab1</button> <button :class="{ 'active': activeTab === 'tab2' }" @click="activeTab = 'tab2'">Tab2</button> <button :class="{ 'active': activeTab === 'tab3' }" @click="activeTab = 'tab3'">Tab3</button> </div> <div :class="{ 'show': activeTab === 'tab1' }">Tab1 Content</div> <div :class="{ 'show': activeTab === 'tab2' }">Tab2 Content</div> <div :class="{ 'show': activeTab === 'tab3' }">Tab3 Content</div> ``` 3. 使用组件 将每个 tab 对应的内容封装成一个组件，然后在父组件中通过切换组件来实现 tab 切换。这种方法相对于前两种方法更加灵活和可维护，但需要进行组件的拆分和引用。例如： ```html <div> <button @click="activeTab = 'tab1'">Tab1</button> <button @click="activeTab = 'tab2'">Tab2</button> <button @click="activeTab = 'tab3'">Tab3</button> </div> <tab1 v-if="activeTab === 'tab1'"></tab1> <tab2 v-if="activeTab === 'tab2'"></tab2> <tab3 v-if="activeTab === 'tab3'"></tab3> ``` 以上三种方法均可实现 tab 切换内容，选择哪种方法最好取决于具体的业务场景和需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值