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

前端开发自动切换Tab选项卡

2018-11-20 22:19:54 分类：教程 阅读(58) 评论(0)
前端开发技术语言
前端开发技术论文
web 前端开发技术ppt

自动切换的TAB（选项卡）

 

代码片段 1

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Tab选项卡(自动切换)</title>
        <meta
            name=”viewport”
            content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”
        />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            html,
            body {
                overflow-x: hidden;
                height: 100%;
            }
            body {
                position: relative;
                height: 100%;
                background: #fff;
            }
            #tab {
                width: 720px;
                margin: 50px auto;
            }
            .tabNav {
                overflow: hidden;
            }
            .tabNav span {
                float: left;
                height: 70px;
                text-align: center;
            }
            .tabNav span em {
                font-style: normal;
                display: block;
                height: 65px;
                line-height: 70px;
                font-size: 24px;
                color: #999;
                border-width: 4px 1px 1px;
                border-style: solid;
                border-color: #d8d8d8;
                background-color: #f5f5f5;
                margin-left: -1px;
            }
            .tabNav span.current em {
                background-color: #e1e1e1;
                border-top-color: #a1a1a1;
            }
            .tabContent .dc {
                border-width: 0 1px 1px;
                border-style: solid;
                border-color: #d8d8d8;
                display: none;
                padding: 20px;
            }
            .tabContent div.current {
                display: block;
            }
        </style>
    </head>
    <body>
        <div id=”tab”>
            <div class=”tabNav”>
                <span class=”current”><em>标题1</em></span>
                <span><em>标题2</em></span> <span><em>标题3</em></span>
                <span><em>标题4</em></span> <span><em>标题5</em></span>
                <span><em>标题6</em></span> <span><em>标题7</em></span>
                <span><em>标题8</em></span>
            </div>
            <div class=”tabContent”>
                <div class=”dc” style=”display:block”>内容1</div>
                <div class=”dc”>内容2</div>
                <div class=”dc”>内容3</div>
                <div class=”dc”>内容4</div>
                <div class=”dc”>内容5</div>
                <div class=”dc”>内容6</div>
                <div class=”dc”>内容7</div>
                <div class=”dc”>内容8</div>
            </div>
        </div>
        <script type=”text/javascript”>
            var tab = function(obj, c) {
                this.init(obj, c)
            }
            tab.prototype = {
                init: function(obj, c) {
                    var self = this
                    if (self.getId(obj) == null) return
                    ;(this.wrap = self.getId(obj)),
                        (this.con = self.getClass(obj, ‘dc’)),
                        (this.span = self
                            .getClass(obj, ‘tabNav’)[0]
                            .getElementsByTagName(‘span’)),
                        (this.com = c),
                        (this.myIndex = 0),
                        (this.m = ”),
                        (this.len = this.span.length)
                    this.render()
                    if (this.com.play == true) {
                        this.timer()
                    }
                },
                timer: function() {
                    ;(this.time = null),
                        (self = this),
                        (t = this.com.speend || 3000)
                    clearInterval(self.time)
                    this.time = setInterval(function() {
                        self.myIndex++
                        if (self.myIndex == self.len) self.myIndex = 0
                        self.show(self.myIndex)
                    }, t)
                },
                render: function() {
                    var w = this.wrap.offsetWidth,
                        self = this
                    for (var i = 0; i < this.span.length; i++) {
                        this.span[i].style.width = parseInt(w / this.len) + ‘px’
                        this.span[i].index = i
                        this.span[i].onmouseover = function() {
                            clearInterval(self.time)
                            //console.log(this.index)
                            for (var k = 0; k < self.len; k++) {
                                self.span[k].className = ”
                                self.con[k].style.display = ‘none’
                            }
                            self.span[this.index].className = ‘current’
                            self.con[this.index].style.display = ‘block’
                            self.myIndex = this.index
                        }
                        this.span[i].onmouseout = function() {
                            if (self.com.play == true) {
                                self.timer()
                            }
                        }
                    }
                },
                show: function(n) {
                    for (var i = 0; i < this.len; i++) {
                        this.span[i].className = ”
                        this.con[i].style.display = ‘none’
                    }
                    this.span[n].className = ‘current’
                    this.con[n].style.display = ‘block’
                },
                getClass: function(obj, className) {
                    var a = this.getId(obj),
                        b = a.getElementsByTagName(‘*’),
                        c = []
                    for (var i = 0; i < b.length; i++) {
                        if (b[i].className == className) {
                            c.push(b[i])
                        }
                    }
                    return c
                },
                getId: function(obj) {
                    if (document.getElementById(obj) == null) return
                    return document.getElementById(obj)
                },
            }
            new tab(‘tab’, { speend: 2500, play: true })
        </script>
    </body>
</html>
web前端开发技术答案
前端开发技术编程
前端开发技术栈
» 本文来自：前端开发者 » 《前端开发自动切换Tab选项卡》
» 本文链接地址：https://www.rokub.com/6563.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论