前端开发简单选项卡的实现

西安前端开发招聘
兰州前端开发招聘
旺小宝前端开发招聘

一. js源生代码实现选项卡:

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>js实现选项卡</title>
        <style type=”text/css”>
            *{
             padding: 0;
             margin: 0;
            }
            ul{
             list-style: none;
            }
            html{
             font-family: ‘微软雅黑’;
            }
            #web{
             width: 100%;
             height:100%;
            }
            .choice{
             width: 1200px;
             height: auto;
             margin: 0 auto;
            }
            ul{
             width: 1200px;
             height: 50px;
            }
            li{
             width: 240px;
             height: 50px;
             background: #3D8765;
             color: #fff;
             text-align: center;
             line-height: 50px;
             cursor: pointer;
             float: left;
            }
            li.active{
             background: #013B20;
            }
            .choice>section{
             width: 1198px;
             height: 400px;
             text-align: center;
             border: 1px solid #666;
             display: none;
            }
            .choice>section.active{
             display: block;
            }
        </style>
    </head>
    <body>
        <section id=”web”>
            <section class=”choice”>
                <ul>
                    <li class=”active”>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                <section class=”active”>内容1</section>
                <section>内容2</section>
                <section>内容3</section>
                <section>内容4</section>
                <section>内容5</section>
            </section>
        </section>
    </body>
    <script type=”text/javascript”>
        var oWeb = document.getElementById(‘web’)
        var oChoice = oWeb.getElementsByClassName(‘choice’)[0]
        var oUl = oChoice.children[0] // 获取ul对象
        var oLi = oUl.children // 获取li集合
        // 点击事件
        for (var i = 0; i < oLi.length; i++) {
            oLi[i].index = i // 给每个选项添加索引,目的是与内容关联起来
            oLi[i].onclick = function() {
                for (var j = 0; j < oLi.length; j++) {
                    // 把所有的类名清空
                    oLi[j].className = ”
                    oChoice.children[j + 1].className = ” //
                }
                // 添加点击项以及关联的内容的类名 active
                this.className = ‘active’
                oChoice.children[this.index + 1].className = ‘active’
            }
        }
    </script>
</html>

二. jquery实现选项卡:

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>jquery实现选项卡</title>
        <script src=”http://code.jquery.com/jquery-2.1.4.min.js”></script>
        <style type=”text/css”>
            * {
                padding: 0;
                margin: 0;
            }
            ul {
                list-style: none;
            }
            html {
                font-family: ‘微软雅黑’;
            }
            #web {
                width: 100%; height:100%;
            }
            .choice {
                width: 1200px;
                height: auto;
                margin: 0 auto;
            }
            ul {
                width: 1200px;
                height: 50px;
            }
            li {
                width: 240px;
                height: 50px;
                background: #3D8765;
                color: #fff;
                text-align: center;
                line-height: 50px;
                cursor: pointer;
                float: left;
            }
            li.active {
                background: #013B20;
            }
            .choice>section {
                width: 1198px;
                height: 400px;
                text-align: center;
                border: 1px solid #666;
                display: none;
            }
            .choice>section.active {
                display: block;
            }
        </style>
    </head>
    <body>
        <section id=”web”>
            <section class=”choice”>
                <ul>
                    <li class=”active”>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                <section class=”active”>内容1</section>
                <section>内容2</section>
                <section>内容3</section>
                <section>内容4</section>
                <section>内容5</section>
            </section>
        </section>
    </body>
    <script type=”text/javascript”>
        $(function() {
            // 选项卡
            $(‘.choice ul’)
                .find(‘li’)
                .click(function() {
                    var index = $(this).index() // 创建索引,关联选项卡的内容
                    $(this)
                        .addClass(‘active’)
                        .siblings()
                        .removeClass(‘active’)
                    $(‘.choice section’)
                        .eq(index)
                        .addClass(‘active’)
                        .siblings()
                        .removeClass(‘active’)
                })
        })
    </script>
</html>
大连前端开发招聘
思睿地产招聘前端开发
智联招聘web前端开发
» 本文来自:前端开发者 » 《前端开发简单选项卡的实现》
» 本文链接地址:https://www.rokub.com/7788.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!