可以復(fù)用的div切換隱藏插件,直接在html頁面調(diào)用，填寫對(duì)應(yīng)的class名字

1.新建js文件

/*
 * tabs_name:用于觸發(fā)事件的標(biāo)簽的類名；
 * contents_name:內(nèi)容容器的類名；
 * tabs_checked_style:標(biāo)簽為選中狀態(tài)時(shí)的樣式；
 * contents_checked_style:內(nèi)容容器為選中狀態(tài)時(shí)的樣式；
 * classList.toggle();
 * 檢查元素的類名列表中是否有指定的類名，如果有則移除，如果沒有則添加；
 * */
//切換隱藏插件 
function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
    var tabs = document.querySelectorAll(tabs_name),
    contents = document.querySelectorAll(contents_name),
    e_mark = 0;
    for (var i = 0, len = tabs.length; i < len; i++) {
        tabs[i].num = i;
        tabs[i].onclick = function () {
            tabs[e_mark].classList.toggle(tabs_checked_style);
            tabs[this.num].classList.toggle(tabs_checked_style);
          contents[e_mark].classList.toggle(contents_checked_style);
          contents[this.num].classList.toggle(contents_checked_style);
          e_mark = this.num;
        };
        }
}

2.html頁面中

1.調(diào)用js

        window.onload = function main() {
             Tabs(".list-item", ".kind_c-right", "list-item-checked", "contents-checked");
        }


2.html內(nèi)容
//點(diǎn)擊左側(cè)，實(shí)現(xiàn)右側(cè)切換
//左側(cè)

   

     商用顯示設(shè)備
     出入口管理