js选项卡

fxp 发布于2019-08-23 15:21 / 3432人阅读

摘要：实现效果代码选项卡练习非上市公司非上市公司股份公司股份公司中国石油化工股份有限公司账户管理资金归集中国化工股份有限公司代码代码

实现效果

html代码





    选项卡练习
    
    



    
       
             
                 非上市公司非上市公司
            股份公司
                 股份公司
             
       
       
              
                      中国石油化工股份有限公司
              
              
                      账户管理资金归集
              
           
                中国化工股份有限公司

css 代码

.container {
    display: flex;
    width: 500px;
    height: 400px;
    border: 1px solid #000;
    margin: 0 auto;
}

.container .tab-link-container {
    width: 100px;
    border: 1px solid #00f;
}

.container .tab-link-container .tab-hover {
    color: #000;
    background: linear-gradient(to right, #00f, #fff);
}

.container .tab-link-container ul {
    list-style: none;
}

.container .tab-link-container ul li {
    height: 40px;
    text-align: center;
}

.container .tab-link-container ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 12px;
    color: blue;
    box-sizing: border-box;
    font-size: 12px;
    width: 100%;
    height: 100%;
    padding: 5px;
    background: linear-gradient(to right, #0ff, #fff);
    transition: all 3s;
}

.container .tab-link-container ul li a:hover {
    color: #000;
    background: linear-gradient(to right, #00f, #fff);
}

.container .tab-content-container {
    flex: 1 1;
    border: 1px solid #0ff;
}

.container .tab-content {
    display: none;
    transition: all 1s linear;
}

js代码

let linkArray = document.getElementsByClassName("tab-link");
for (let i = 0; i < linkArray.length; i++) {
    linkArray[i].onclick = change;
}
let currentIndex = 0;
init();
function init() {
    changeContent();
}
function change() {
    if (this.classList.contains("tab-hover")) {
        return;
    }
    removeHoverClass(this);
    addHoverClass(this);
    changeContent(this);
}

function removeHoverClass(that) {
    let current = document.getElementsByClassName("tab-hover")[0];
    current.classList.remove("tab-hover");
}

function addHoverClass(that) {
    that.classList.add("tab-hover");
}

function changeContent() {
    let contentArray = document.getElementsByClassName("tab-content");
    contentArray[currentIndex].style.display = "none";
    for (let i = 0; i < linkArray.length; i++) {
        if (linkArray[i].classList.contains("tab-hover")) {
            currentIndex = i;
            break;
        }
    }    
    contentArray[currentIndex].style.display = "block";
}

GPU云服务器云服务器 js纵向选项卡 js实现选项卡 js选项卡切换 js删除下拉选项卡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101927.html

oeasy教您玩转vim - 68 - # 标签页tab

摘要：选项卡回忆上次上次有三种批量替换，分别是执行的可以用按顺序增加分别对应的窗口缓存文件参数文件各有各自的列表切换删除增加的方式以什么开始结束的模式关于窗口容器我们切得越细可用的范围越小总共的屏幕资源很快就用完了我又想多线程访问又想 tab选项卡回忆上次上次有三种批量替换，分别是:windo:bufdo:argdo...

pkwenda 2021-11-24 09:39 评论0 收藏0
JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框

摘要：建立索引，记录每一个节点值。选项卡模拟选项卡方法一大清洗，在设置颜色之前把所有的颜色值设为空。宋体选项卡一选项卡二选项卡三内容一内容二内容三方法二点击什么，清除什么。 1.this的使用 this js中的关键字 js内部已经定义好了,可以不声明直接使用 this的指向问题 1. 在函数外部使用 this指向的是window 2...

tanglijun 2019-08-22 17:14 评论0 收藏0
JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框

摘要：建立索引，记录每一个节点值。选项卡模拟选项卡方法一大清洗，在设置颜色之前把所有的颜色值设为空。宋体选项卡一选项卡二选项卡三内容一内容二内容三方法二点击什么，清除什么。 1.this的使用 this js中的关键字 js内部已经定义好了,可以不声明直接使用 this的指向问题 1. 在函数外部使用 this指向的是window 2...

hot_pot_Leo 2019-08-29 15:23 评论0 收藏0
JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框

摘要：建立索引，记录每一个节点值。选项卡模拟选项卡方法一大清洗，在设置颜色之前把所有的颜色值设为空。宋体选项卡一选项卡二选项卡三内容一内容二内容三方法二点击什么，清除什么。 1.this的使用 this js中的关键字 js内部已经定义好了,可以不声明直接使用 this的指向问题 1. 在函数外部使用 this指向的是window 2...

CoderDock 2019-08-02 10:26 评论0 收藏0
善用CSS伪类，不用JS也能做出选项卡功能

摘要：取决于你的高度咦还是不能动因为我们还需要运用的两个重要技巧伪类和通用兄弟元素选择器，才能让选项卡与内容块做切换。加入伪类与通用兄弟元素选择器我们为加上伪类，表示当这个被选中时等于对应的标签被选中使才会呈现的样式。先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例页面讲到选项卡（...

XUI 2019-08-26 13:49 评论0 收藏0
善用CSS伪类，不用JS也能做出选项卡功能

摘要：取决于你的高度咦还是不能动因为我们还需要运用的两个重要技巧伪类和通用兄弟元素选择器，才能让选项卡与内容块做切换。加入伪类与通用兄弟元素选择器我们为加上伪类，表示当这个被选中时等于对应的标签被选中使才会呈现的样式。先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例页面讲到选项卡（...

levius 2019-08-30 10:55 评论0 收藏0