OOP選項卡

時間  2019-11-09
標籤 oop 選項 简体版
原文   原文鏈接

選項卡思想

  • 獲取操做的元素
  • 清除類名功能
  • 循環綁定點擊事件

示例代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; list-style: none; } .box { width: 600px; margin: 30px auto; } .tab_box { border: 1px solid salmon; display: flex; } .tab { flex: 1; height: 50px; line-height: 50px; text-align: center; font-size: 20px; cursor: pointer; user-select: none; } .tab:nth-child(2) { border: 1px solid salmon; border-bottom: none; border-top: none; } .tab.current { /*同時又 tab 和 current者兩個類名的元素纔會有對應的樣式 */ background: salmon; color: #fff; } .body_box { width: 600px; height: 300px; border: 1px dashed salmon; border-top: none; overflow: hidden; box-sizing: border-box; } .body { width: 600px; height: 300px; text-align: center; line-height: 300px; font-size: 50px; display: none; } .body.current { display: block; } </style>
</head>

<body>
    <div class="box" id="box">
        <ul class='tab_box'>
            <li class="tab current">css</li>
            <li class="tab">JS</li>
            <li class="tab">HTML</li>
        </ul>
        <ul class="body_box">
            <li class="body current">CSS基礎</li>
            <li class="body">JS基礎</li>
            <li class="body">HTML基礎</li>
        </ul>
    </div>
    <div class="box" id="box2">
            <ul class='tab_box'>
                <li class="tab current">css</li>
                <li class="tab">JS</li>
                <li class="tab">HTML</li>
            </ul>
            <ul class="body_box">
                <li class="body current">CSS基礎</li>
                <li class="body">JS基礎</li>
                <li class="body">HTML基礎</li>
            </ul>
        </div>
        <div class="box" id="box3">
                <ul class='tab_box'>
                    <li class="tab current">css</li>
                    <li class="tab">JS</li>
                    <li class="tab">HTML</li>
                </ul>
                <ul class="body_box">
                    <li class="body current">CSS基礎</li>
                    <li class="body">JS基礎</li>
                    <li class="body">HTML基礎</li>
                </ul>
            </div>
    <script src="./tab.js"></script>
    <script> /* 獲取操做的元素 ：tab body 清除類名功能 循環綁定點擊事件 */ function Tab(idSelector) { this.box = document.querySelector(idSelector); //獲取最外層盒子 this.tabs = this.box.getElementsByClassName('tab'); this.bodys = this.box.getElementsByClassName('body'); this.mapBind(); } Tab.prototype.mapBind = function() { //this 都是tab 的實例 //this.tabs 是咱們要去綁定的元素 for (let i = 0; i < this.tabs.length; i++) { this.tabs[i].onclick = ()=> { //給每個tab綁定點擊事件 this.clearClass(); this.tabs[i].className = 'tab current'; this.bodys[i].className = 'body current'; } } } Tab.prototype.clearClass = function () { //清除類名 this.tabs this.bodys 上的current類名清除 for (let i = 0; i < this.tabs.length; i++) { this.tabs[i].className = 'tab'; this.bodys[i].className = 'body'; } } var tab = new Tab('#box'); var tab = new Tab('#box2'); var tab = new Tab('#box3'); </script>
</body>

</html>
複製代碼
class Tab{
    constructor(idSelector){
        this.box = document.querySelector(idSelector); //獲取最外層盒子
        this.tabs = this.box.getElementsByClassName('tab');
        this.bodys = this.box.getElementsByClassName('body');
        this.mapBind();
    }
    mapBind(){
        //this 都是tab 的實例
        //this.tabs 是咱們要去綁定的元素
        for (let i = 0; i < this.tabs.length; i++) {
            this.tabs[i].onclick =  ()=> {
            //給每個tab綁定點擊事件
            this.clearClass();
            this.tabs[i].className = 'tab current';
            this.bodys[i].className = 'body current';
            }
        }
    }
    clearClass(){
        //清除類名 this.tabs this.bodys 上的current類名清除
        for (let i = 0; i < this.tabs.length; i++) {
            this.tabs[i].className = 'tab';
            this.bodys[i].className = 'body';
        }
    }
}


複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程