实现效果

图片描述

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';}

转载地址：http://vogwo.baihongyu.com/

你可能感兴趣的文章

SQLite数据库、ListView控件的使用