js选项卡

最新推荐文章于 2022-10-26 17:18:28 发布

weixin_34032827

最新推荐文章于 2022-10-26 17:18:28 发布

阅读量113

点赞数

原文链接：https://segmentfault.com/a/1190000018231380

版权

实现效果

图片描述

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

weixin_34032827

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js选项卡

实现效果html代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;选项卡练习&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="reset.css"&gt; ...
复制链接

扫一扫