js选项卡

实现效果

图片描述

html代码

<!DOCTYPE html>
<html>

<head>
    <title>选项卡练习</title>
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="tab.css">
</head>

<body>
    <div class="container">
       <div class="tab-link-container">
             <ul>
                 <li><a href="#" class="tab-link ">非上市公司非上市公司</a></li>
            <li><a href="#" class="tab-link tab-hover">股份公司</a></li>
                 <li><a href="#" class="tab-link ">股份公司</a></li>
             </ul>
       </div>
       <div class="tab-content-container">
              <div class="tab-content">
                      <p>中国石油化工股份有限公司</p>
              </div>
              <div class="tab-content">
                      <p>账户管理资金归集</p>
              </div>
           <div class="tab-content">
                <p>中国化工股份有限公司</p>
           </div>
              
       </div>
    </div>
    <script src="tab.js"></script>
</body>

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

js选项卡

实现效果

html代码

css 代码

js代码

北方

引用和评论

[禁止chrome页面翻译代码块]chrome插件

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具