找回密码
当前位置：前端开发者 > JavaScript > 正文

js选项卡的N种写法

2018-11-14 分类：JavaScript 阅读(789) 评论(0)
前端开发好用的动画插件
firefox 前端开发插件
浏览器前端开发插件

html 代码片段

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .js-tab {
                width: 300px;
            }
            .js-tab li {
                float: left;
                width: 100px;
                height: 25px;
                border: #000 solid 1px;
                color: #000;
                background-color: #fff;
                list-style: none;
                cursor: pointer;
            }
            .js-tab li.js-click {
                color: #fff;
                background-color: #f00;
            }
            .js-div {
                border: #000 solid 1px;
                width: 300px;
                height: 100px;
            }
            .js-div div {
                height: 100%;
            }
            .display {
                display: none;
            }
            .clearfix:after {
                content: ‘\200B’;
                height: 0;
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <ul class=”js-tab clearfix” id=”js-tab”>
            <li class=”js-click” onclick=”xuanxiangka(0)”>选项卡1</li>
            <li onclick=”xuanxiangka(1)”>选项卡2</li>
            <li onclick=”xuanxiangka(2)”>选项卡3</li>
        </ul>
        <div class=”js-div” id=”js-div”>
            <div>内容1</div>
            <div class=”display”>内容2</div>
            <div class=”display”>内容3</div>
        </div>
        <script>
            var tab = document
                .getElementById(‘js-tab’)
                .getElementsByTagName(‘li’)
            var div = document
                .getElementById(‘js-div’)
                .getElementsByTagName(‘div’)
            function AllTabs() {
                for (var i = 0; i < tab.length; i++) {
                    tab[i].style.color = ‘#000’
                    tab[i].style.backgroundColor = ‘#fff’
                }
            }
            function AllNone() {
                for (var i = 0; i < div.length; i++) {
                    div[i].style.display = ‘none’
                }
            }
            function xuanxiangka(i) {
                AllTabs()
                AllNone()
                tab[i].style.color = ‘#fff’
                tab[i].style.backgroundColor = ‘#f00’
                div[i].style.display = ‘block’
            }
        </script>
    </body>
</html>

后来，为了提升性能，再仔细看一看自己的代码，好多地方性能都不是很好，比如说style，以及每次切换选项卡都必须把所有的样式都重置一遍，所以再次改变一下自己的代码：不用每次都重置一遍了，更改样式的只有旧的和新的，兼容性还不错，皆大欢喜
html 代码片段

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .js-tab {
                width: 300px;
            }
            .js-tab li {
                float: left;
                width: 100px;
                height: 25px;
                border: #000 solid 1px;
                color: #000;
                background-color: #fff;
                list-style: none;
                cursor: pointer;
            }
            .js-tab li.js-click {
                color: #fff;
                background-color: #f00;
            }
            .js-div {
                border: #000 solid 1px;
                width: 300px;
                height: 100px;
            }
            .js-div div {
                height: 100%;
            }
            .display {
                display: none;
            }
            .clearfix:after {
                content: ‘\200B’;
                height: 0;
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <ul class=”js-tab clearfix” id=”js-tab”>
            <li class=”js-click” onclick=”xuanxiangka(0)”>选项卡1</li>
            <li onclick=”xuanxiangka(1)”>选项卡2</li>
            <li onclick=”xuanxiangka(2)”>选项卡3</li>
        </ul>
        <div class=”js-div” id=”js-div”>
            <div>内容1</div>
            <div class=”display”>内容2</div>
            <div class=”display”>内容3</div>
        </div>
        <script>
            var tab = document
                .getElementById(‘js-tab’)
                .getElementsByTagName(‘li’)
            var div = document
                .getElementById(‘js-div’)
                .getElementsByTagName(‘div’)
            var index = 0
            function xuanxiangka(i) {
                tab[index].removeAttribute(‘class’)
                div[index].className = ‘display’
                index = i
                tab[index].className = ‘js-click’
                div[index].removeAttribute(‘class’)
            }
        </script>
    </body>
</html>

在后来，由于jquery的影响，样式和js分离，onclick事件不写在html上，以及杜绝全局变量等等，于是又有了新写法：
html 代码片段

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .js-tab {
                width: 300px;
            }
            .js-tab li {
                float: left;
                width: 100px;
                height: 25px;
                border: #000 solid 1px;
                color: #000;
                background-color: #fff;
                list-style: none;
                cursor: pointer;
            }
            .js-tab li.js-click {
                color: #fff;
                background-color: #f00;
            }
            .js-div {
                border: #000 solid 1px;
                width: 300px;
                height: 100px;
            }
            .js-div div {
                height: 100%;
            }
            .display {
                display: none;
            }
            .clearfix:after {
                content: ‘\200B’;
                height: 0;
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <ul class=”js-tab clearfix” id=”js-tab”>
            <li class=”js-click”>选项卡1</li>
            <li>选项卡2</li>
            <li>选项卡3</li>
        </ul>
        <div class=”js-div” id=”js-div”>
            <div>内容1</div>
            <div class=”display”>内容2</div>
            <div class=”display”>内容3</div>
        </div>
        <script>
            ;(function() {
                var tab = document
                    .getElementById(‘js-tab’)
                    .getElementsByTagName(‘li’)
                var div = document
                    .getElementById(‘js-div’)
                    .getElementsByTagName(‘div’)
                var index = 0
                function xuanxiangka() {
                    tab[index].removeAttribute(‘class’)
                    div[index].className = ‘display’
                    index = this.getAttribute(‘data-index’)
                    tab[index].className = ‘js-click’
                    div[index].removeAttribute(‘class’)
                }
                ;(function() {
                    for (var i = 0, j = tab.length; i < j; i++) {
                        tab[i].addEventListener(‘click’, xuanxiangka, false)
                        tab[i].setAttribute(‘data-index’, i)
                    }
                })()
            })()
        </script>
    </body>
</html>

利用冒泡事件也可以写选项卡，css3的pointer-events属性可以有效的避免在冒泡事件中误点到其他元素：
html 代码片段

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .js-tab {
                width: 300px;
                pointer-events: none;
            }
            .js-tab li {
                float: left;
                width: 100px;
                height: 25px;
                border: #000 solid 1px;
                color: #000;
                background-color: #fff;
                list-style: none;
                cursor: pointer;
                pointer-events: all;
            }
            .js-tab li.js-click {
                color: #fff;
                background-color: #f00;
            }
            .js-div {
                border: #000 solid 1px;
                width: 300px;
                height: 100px;
            }
            .js-div div {
                height: 100%;
            }
            .display {
                display: none;
            }
            .clearfix:after {
                content: ‘\200B’;
                height: 0;
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <ul class=”js-tab clearfix” id=”js-tab”>
            <li class=”js-click”>选项卡1</li>
            <li>选项卡2</li>
            <li>选项卡3</li>
        </ul>
        <div class=”js-div” id=”js-div”>
            <div>内容1</div>
            <div class=”display”>内容2</div>
            <div class=”display”>内容3</div>
        </div>
        <script>
            ;(function() {
                var tab = document.getElementById(‘js-tab’)
                var tabLi = tab.getElementsByTagName(‘li’)
                var div = document
                    .getElementById(‘js-div’)
                    .getElementsByTagName(‘div’)
                var index = 0
                function xuanxiangka(event) {
                    var e = event.target
                    tabLi[index].removeAttribute(‘class’)
                    div[index].className = ‘display’
                    index = e.getAttribute(‘data-index’)
                    e.className = ‘js-click’
                    div[index].removeAttribute(‘class’)
                }
                ;(function() {
                    for (var i = 0, j = tabLi.length; i < j; i++) {
                        tabLi[i].setAttribute(‘data-index’, i)
                    }
                    tab.addEventListener(‘click’, xuanxiangka, false)
                })()
            })()
        </script>
    </body>
</html>

最后来个构造函数，为了保证能使用各种标签，用id来代替tagname：
html 代码片段

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .js-tab {
                width: 300px;
                pointer-events: none;
            }
            .js-tab li {
                float: left;
                width: 100px;
                height: 25px;
                border: #000 solid 1px;
                color: #000;
                background-color: #fff;
                list-style: none;
                cursor: pointer;
                pointer-events: all;
            }
            .js-tab li.js-click {
                color: #fff;
                background-color: #f00;
            }
            .js-div {
                border: #000 solid 1px;
                width: 300px;
                height: 100px;
            }
            .js-div div {
                height: 100%;
                display: none;
            }
            .js-div div.js-block {
                display: block;
            }
            .clearfix:after {
                content: ‘\200B’;
                height: 0;
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <ul class=”js-tab clearfix”>
            <li class=”js-click” id=”js-tab-a”>选项卡1</li>
            <li id=”js-tab-b”>选项卡2</li>
            <li id=”js-tab-c”>选项卡3</li>
        </ul>
        <div class=”js-div”>
            <div class=”js-block” id=”js-div-a”>内容1</div>
            <div id=”js-div-b”>内容2</div>
            <div id=”js-div-c”>内容3</div>
        </div>
        <script>
            ;(function() {
                function Class_XuanXiangKa(
                    tab,
                    div,
                    tabClassname,
                    divClassname,
                ) {
                    var _self = this
                    this.tab = tab
                    this.div = div
                    this.tabClassname = tabClassname
                    this.divClassname = divClassname
                    this.index = 0
                    this.Click = function(event) {
                        _self.tab[_self.index].removeAttribute(‘class’)
                        _self.div[_self.index].removeAttribute(‘class’)
                        _self.index = this.getAttribute(‘data-index’)
                        _self.tab[_self.index].className = _self.tabClassname
                        _self.div[_self.index].className = _self.divClassname
                    }
                    this.init = (function() {
                        for (var i = 0, j = _self.tab.length; i < j; i++) {
                            _self.tab[i].addEventListener(
                                ‘click’,
                                _self.Click,
                                false,
                            )
                            _self.tab[i].setAttribute(‘data-index’, i)
                        }
                    })()
                }
                var xxk = new Class_XuanXiangKa(
                    [
                        document.getElementById(‘js-tab-a’),
                        document.getElementById(‘js-tab-b’),
                        document.getElementById(‘js-tab-c’),
                    ],
                    [
                        document.getElementById(‘js-div-a’),
                        document.getElementById(‘js-div-b’),
                        document.getElementById(‘js-div-c’),
                    ],
                    ‘js-click’,
                    ‘js-block’,
                )
            })()
        </script>
    </body>
</html>
前端开发插件
sublime的前端开发插件
chrome 前端开发插件
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论