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

前端 tab 开发jQuery简单封装

2018-07-31 分类：jQuery 阅读(865) 评论(0)

系统开发 前端框架|移动开发前端html5框架|最新前端开发框架

html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发:testtab</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            line-height: 1;
        }
        body {
            font-family: ‘Microsoft Yahe’, sans-serif;
            font-size: 14px;
        }
        ul,
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .tabnav {
            text-align: center;
        }
        .tabnav>ul {
            display: table;
            margin: 0 auto;
        }
        .tabnav li {
            display: inline-block;
        }
        .tabnav ul a {
            display: block;
            padding: 8px 18px;
            background-color: #00c4ff;
            color: #fff;
        }
        .tabnav ul li.on a {
            background-color: purple;
        }
        .tabcon ul li {
            display: none;
        }
        .tabcon ul li.on {
            display: block;
        }
    </style>
</head>
<body>
    <div class=”tabnav”>
        <ul>
            <li class=”on”>
                <a href=”javascript:void(0);”>tab01</a>
            </li>
            <li>
                <a href=”javascript:void(0);”>tab02</a>
            </li>
            <li>
                <a href=”javascript:void(0);”>tab03</a>
            </li>
        </ul>
    </div>
    <div class=”tabcon”>
        <ul>
            <li class=”on”>
                content0001
            </li>
            <li>
                content0002
            </li>
            <li>
                <p>content0003
                </p>
                <p>content0003
                </p>
                <p>content0003
                </p>
                <p>content0003
                </p>
            </li>
        </ul>
    </div>
</body>
<script src=”http://libs.visualtec.cn/jquery/jquery-1.11.2.min.js”></script>
<script>
    $(function () {
        function tab() {
            $(‘.tabnav ul li’).on(‘click’, function () {
                var index = $(this).index();
                $(this).addClass(‘on’).siblings().removeClass(‘on’);
                $(“.tabcon ul li”).eq(index).addClass(‘on’).siblings().removeClass(‘on’);
            });
        }
        tab();
    })
</script>
</html>

前端开发js框架有哪些|移动前端开发框架排名|前端开发框架bootstrap和knockout.js

赞(0)
前端开发者 » 前端 tab 开发jQuery简单封装
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论