js選項(xiàng)卡

fxp 發(fā)布于2019-08-23 15:21 / 3433人閱讀

摘要：實(shí)現(xiàn)效果代碼選項(xiàng)卡練習(xí)非上市公司非上市公司股份公司股份公司中國(guó)石油化工股份有限公司賬戶(hù)管理資金歸集中國(guó)化工股份有限公司代碼代碼

實(shí)現(xiàn)效果

html代碼





    選項(xiàng)卡練習(xí)
    
    



    
       
             
                 非上市公司非上市公司
            股份公司
                 股份公司
             
       
       
              
                      中國(guó)石油化工股份有限公司
              
              
                      賬戶(hù)管理資金歸集
              
           
                中國(guó)化工股份有限公司

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