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

前端页面 各种tab切换

2018-07-22 分类：JavaScript 阅读(1347) 评论(0)

移动app开发 前端框架|js前端开发框架有哪些|最新前端开发框架

1.鼠标移入移出切换
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发框架:tab切换</title>
    <style type=”text/css”>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        .wrapper {
            margin: 0 auto;
            width: 100%;
            max-width: 1140px;
        }
        .tabbox {
            margin: 40px auto;
            width: 400px;
            height: 200px;
            border: 1px solid #f70;
            overflow: hidden;
        }
        .tabbox .tab-tit {
            position: relative;
            height: 40px;
        }
        ul {
            position: absolute;
            left: -1px;
            width: 401px;
            height: 40px;
            line-height: 40px;
            background-color: #eaeaea;
        }
        ul li {
            float: left;
            border-left: 1px solid #f70;
            border-bottom: 1px solid #f70;
            text-align: center;
            width: 99px;
            height: 40px;
            overflow: hidden;
        }
        .clear {
            clear: both;
        }
        .select {
            padding-right: 1px;
            border-bottom: none;
            background-color: #fff;
        }
        a:link,
        a:visited {
            font-size: 16px;
            font-weight: bold;
            color: #888;
            text-decoration: none;
        }
        .select a {
            color: #333;
        }
        a:hover,
        a:active {
            color: #f20;
            font-weight: bold;
        }
        .tab-txt {
            width: 400px;
            padding: 40px;
            overflow: hidden;
        }
        .demo {
            display: none;
        }
        .tab-txt p {
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div id=”tabBox” class=”tabbox”>
            <div id=”tabTit” class=”tab-tit”>
                <ul>
                    <li class=”select”>
                        <a href=”javascript:;”>女枪</a>
                    </li>
                    <li>
                        <a href=”javascript:;”>提莫</a>
                    </li>
                    <li>
                        <a href=”javascript:;”>盖伦</a>
                    </li>
                    <li>
                        <a href=”javascript:;”>剑圣</a>
                    </li>
                </ul>
            </div>
            <!– <div class=”clear”></div> –>
            <div id=”tabTxt” class=”tab-txt”>
                <div class=”demo” style=”display: block;”>
                    <p>我有两把枪，一把叫射，另一把叫，啊~</p>
                    <p>你有一双迷人的眼睛，我非常喜欢！</p>
                </div>
                <div class=”demo”>
                    <p>我去前面探探路</p>
                    <p>提莫队长正在待命！</p>
                </div>
                <div class=”demo”>
                    <p>放马过来吧，你会死的很光荣的！</p>
                    <p>快点儿结束吧，我头有点儿转晕了……</p>
                </div>
                <div class=”demo”>
                    <p>我的剑就是你的剑。</p>
                    <p>眼睛多，看东西才会更加清楚</p>
                </div>
            </div>
        </div>
    </div>
    <script type=”text/javascript”>
        function $(id) {
            return typeof id === “string” ? document.getElementById(id) : id;
        }
        window.onload = function () {
            var tits = $(“tabTit”).getElementsByTagName(“li”);
            var txts = $(“tabTxt”).getElementsByClassName(“demo”);
            if (tits.length != txts.length) { return; }
            for (var i = 0, l = tits.length; i < l; i++) {
                tits[i].id = i;
                tits[i].onmouseover = function () {
                    for (var j = 0; j < l; j++) {
                        tits[j].className = “”;
                        txts[j].style.display = “none”;
                    }
                    this.className = “select”;
                    txts[this.id].style.display = “block”;
                }
            }
        }
    </script>
</body>
</html>

2.鼠标移入移出延时切换
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发tab切换之延时切换</title>
    <style type=”text/css”>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        .wrapper {
            margin: 0 auto;
            width: 100%;
            max-width: 1140px;
        }
        .tabbox {
            margin: 40px auto;
            width: 400px;
            height: 200px;
            border: 1px solid #f70;
            overflow: hidden;
        }
        .tabbox .tab-tit {
            position: relative;
            height: 40px;
        }
        ul {
            position: absolute;
            left: -1px;
            width: 401px;
            height: 40px;
            line-height: 40px;
            background-color: #eaeaea;
        }
        ul li {
            float: left;
            border-left: 1px solid #f70;
            border-bottom: 1px solid #f70;
            text-align: center;
            width: 99px;
            height: 40px;
            overflow: hidden;
        }
        .clear {
            clear: both;
        }
        .select {
            padding-right: 1px;
            border-bottom: none;
            background-color: #fff;
        }
        a:link,
        a:visited {
            font-size: 16px;
            font-weight: bold;
            color: #888;
            text-decoration: none;
        }
        .select a {
            color: #333;
        }
        a:hover,
        a:active {
            color: #f20;
            font-weight: bold;
        }
        .tab-txt {
            width: 400px;
            padding: 40px;
            overflow: hidden;
        }
        .demo {
            display: none;
        }
        .tab-txt p {
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div id=”tabBox” class=”tabbox”>
            <div id=”tabTit” class=”tab-tit”>
                <ul>
                    <li class=”select”>
                        <a href=”javascript:;”>女枪</a>
                    </li>
                    <li>
                        <a href=”javascript:;”>提莫</a>
                    </li>
                    <li>
                        <a href=”javascript:;”>盖伦</a>
                    </li>
                    <li>
                        <a href=”javascript:;”>剑圣</a>
                    </li>
                </ul>
            </div>
            <!– <div class=”clear”></div> –>
            <div id=”tabTxt” class=”tab-txt”>
                <div class=”demo” style=”display: block;”>
                    <p>我有两把枪，一把叫射，另一把叫，啊~</p>
                    <p>你有一双迷人的眼睛，我非常喜欢！</p>
                </div>
                <div class=”demo”>
                    <p>我去前面探探路</p>
                    <p>提莫队长正在待命！</p>
                </div>
                <div class=”demo”>
                    <p>放马过来吧，你会死的很光荣的！</p>
                    <p>快点儿结束吧，我头有点儿转晕了……</p>
                </div>
                <div class=”demo”>
                    <p>我的剑就是你的剑。</p>
                    <p>眼睛多，看东西才会更加清楚</p>
                </div>
            </div>
        </div>
    </div>
    <script type=”text/javascript”>
        function $(id) {
            return typeof id === “string” ? document.getElementById(id) : id;
        }
        window.onload = function () {
            var timer = null;
            var tits = $(“tabTit”).getElementsByTagName(“li”);
            var txts = $(“tabTxt”).getElementsByClassName(“demo”);
            if (tits.length != txts.length) { return; }
            for (var i = 0, l = tits.length; i < l; i++) {
                tits[i].id = i;
                tits[i].onmouseover = function () {
                    var that = this;
                    if (timer) {
                        clearTimeout(timer);
                        timer = null;
                    }
                    timer = setTimeout(function () {
                        for (var j = 0; j < l; j++) {
                            tits[j].className = “”;
                            txts[j].style.display = “none”;
                        }
                        that.className = “select”;
                        txts[that.id].style.display = “block”;
                    }, 500);
                }
            }
        }
    </script>
</body>
</html>

3. tab自动切换，鼠标移入移出立即切换
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>tab切换之自动切换</title>
    <style type=”text/css”>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        .wrapper {
            margin: 0 auto;
            width: 100%;
            max-width: 1140px;
        }
        .tabbox {
            margin: 40px auto;
            width: 400px;
            height: 200px;
            border: 1px solid #f70;
            overflow: hidden;
        }
        .tabbox .tab-tit {
            position: relative;
            height: 40px;
        }
        ul {
            position: absolute;
            left: -1px;
            width: 401px;
            height: 40px;
            line-height: 40px;
            background-color: #eaeaea;
        }
        ul li {
            float: left;
            border-left: 1px solid #f70;
            border-bottom: 1px solid #f70;
            text-align: center;
            width: 99px;
            height: 40px;
            overflow: hidden;
        }
        .clear {
            clear: both;
        }
        .select {
            padding-right: 1px;
            border-bottom: none;
            background-color: #fff;
        }
        a:link,
        a:visited {
            font-size: 16px;
            font-weight: bold;
            color: #888;
            text-decoration: none;
        }
        .select a {
            color: #333;
        }
        a:hover,
        a:active {
            color: #f20;
            font-weight: bold;
        }
        .tab-txt {
            width: 400px;
            padding: 40px;
            overflow: hidden;
        }
        .demo {
            display: none;
        }
        .tab-txt p {
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div id=”tabBox” class=”tabbox”>
            <div id=”tabTit” class=”tab-tit”>
                <ul>
                    <li class=”select”>
                        <a href=”javascript:;”>女枪</a>
                    </li>
                    <li>
                        <a href=”javascript:;”>提莫</a>
                    </li>
                    <li>
                        <a href=”javascript:;”>盖伦</a>
                    </li>
                    <li>
                        <a href=”javascript:;”>剑圣</a>
                    </li>
                </ul>
            </div>
            <!– <div class=”clear”></div> –>
            <div id=”tabTxt” class=”tab-txt”>
                <div class=”demo” style=”display: block;”>
                    <p>我有两把枪，一把叫射，另一把叫，啊~</p>
                    <p>你有一双迷人的眼睛，我非常喜欢！</p>
                </div>
                <div class=”demo”>
                    <p>我去前面探探路</p>
                    <p>提莫队长正在待命！</p>
                </div>
                <div class=”demo”>
                    <p>放马过来吧，你会死的很光荣的！</p>
                    <p>快点儿结束吧，我头有点儿转晕了……</p>
                </div>
                <div class=”demo”>
                    <p>我的剑就是你的剑。</p>
                    <p>眼睛多，看东西才会更加清楚</p>
                </div>
            </div>
        </div>
    </div>
    <script type=”text/javascript”>
        function $(id) {
            return typeof id === “string” ? document.getElementById(id) : id;
        }
        window.onload = function () {
            var index = 0;
            var timer = null;
            var tits = $(“tabTit”).getElementsByTagName(“li”);
            var txts = $(“tabTxt”).getElementsByClassName(“demo”);
            if (tits.length != txts.length) { return; }
            for (var i = 0, l = tits.length; i < l; i++) {
                tits[i].id = i;
                tits[i].onmouseover = function () {
                    clearInterval(timer);
                    styleFun(this.id);
                }
                tits[i].onmouseout = function () {
                    timer = setInterval(autoPlay, 2000);
                }
            }
            //在开启定时器的同时清楚定时器并置空
            if (timer) {
                clearInterval(timer);
                timer = null;
            }
            timer = setInterval(autoPlay, 2000);
            function autoPlay() {
                index++;
                if (index >= tits.length) {
                    index = 0;
                }
                styleFun(index);
            }
            function styleFun(ele) {
                for (var j = 0, m = tits.length; j < m; j++) {
                    tits[j].className = “”;
                    txts[j].style.display = “none”;
                }
                tits[ele].className = “select”;
                txts[ele].style.display = “block”;
                //将鼠标移入移出时的index传给autoPlay;
                index = ele;
            }
        }
    </script>
</body>
</html>

4. 广告栏切换实例
html 代码

<!doctype html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发不用框架:开发tab切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap {
            height: 170px;
            width: 490px;
            margin: 20px auto;
            overflow: hidden;
            position: relative;
            margin: 100px auto;
        }
        .wrap ul {
            position: absolute;
        }
        .wrap ul li {
            height: 170px;
        }
        .wrap ol {
            position: absolute;
            right: 5px;
            bottom: 10px;
        }
        .wrap ol li {
            height: 20px;
            width: 20px;
            background: #ccc;
            border: solid 1px #666;
            margin-left: 5px;
            color: #000;
            float: left;
            line-height: center;
            text-align: center;
            cursor: pointer;
        }
        .wrap ol .on {
            background: #E97305;
            color: #fff;
        }
    </style>
    <script type=”text/javascript”>
        window.onload = function () {
            var wrap = document.getElementById(‘wrap’),
                pic = document.getElementById(‘pic’),
                piclist = pic.getElementsByTagName(‘li’),
                list = document.getElementById(‘list’).getElementsByTagName(‘li’),
                picheight = 170,
                index = 0,
                timer = null;
            if (piclist.length != list.length) {
                return;
            }
            // 定义并调用自动播放函数
            if (timer) {
                clearInterval(timer);
                timer = null;
            }
            timer = setInterval(picFunc, 2000);
            function picFunc() {
                index++;
                if (index >= piclist.length) {
                    index = 0;
                }
                changePic(index);
            }
            // 定义图片切换函数
            function changePic(ele) {
                for (var j = 0, m = piclist.length; j < m; j++) {
                    list[j].className = “”;
                }
                pic.style.top = -ele * picheight + “px”;
                list[ele].className = “on”;
                index = ele;
            }
            // 鼠标划过整个容器时停止自动播放
            wrap.onmouseover = function () {
                clearInterval(timer);
            }
            // 鼠标离开整个容器时继续播放至下一张
            wrap.onmouseout = function () {
                timer = setInterval(picFunc, 2000);
            }
            // 遍历所有数字导航实现划过切换至对应的图片
            for (var i = 0, l = list.length; i < l; i++) {
                list[i].id = i;
                list[i].onmouseover = function () {
                    changePic(this.id);
                }
            }
        }
    </script>
</head>
<body>
    <div class=”wrap” id=’wrap’>
        <ul id=”pic”>
            <li>
                <img src=”http://img.mukewang.com/54111cd9000174cd04900170.jpg” alt=””>
            </li>
            <li>
                <img src=”http://img.mukewang.com/54111dac000118af04900170.jpg” alt=””>
            </li>
            <li>
                <img src=”http://img.mukewang.com/54111d9c0001998204900170.jpg” alt=””>
            </li>
            <li>
                <img src=”http://img.mukewang.com/54111d8a0001f41704900170.jpg” alt=””>
            </li>
            <li>
                <img src=”http://img.mukewang.com/54111d7d00018ba604900170.jpg” alt=””>
            </li>
        </ul>
        <ol id=”list”>
            <li class=”on”>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>
</html>

web前端框架开发|自己开发前端框架|2017年 移动前端开发框架

赞(0)
前端开发者 » 前端页面 各种tab切换
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论