js選項卡

fxp 發布于2019-08-23 15:21 / 3438人閱讀

摘要：實現效果代碼選項卡練習非上市公司非上市公司股份公司股份公司中國石油化工股份有限公司賬戶管理資金歸集中國化工股份有限公司代碼代碼

實現效果

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刪除下拉選項卡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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