demo-tab切换

自己比较喜欢用的tab切换方式，粘贴复制代码直接使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        .navlist {
            width: 1240px;
            margin: 20px auto 0;
        }

        .navlist ul {
            font-size: 0;
        }

        .navlist ul li {
            display: inline-block;
            width: 115px;
            height: 41px;
            line-height: 41px;
            background-color: #f8f8f8;
            border: solid 1px #eaeeed;
            text-align: center;
        }

        .navlist ul li a {
            width: 100%;
            height: 100%;
            display: block;
            font-size: 16px;
            color: #000;
        }

        .navlist ul .active {
            background-color: #fc9900;
        }

        .navlist ul .active a {
            color: #fff;
        }

        .contentBody {
            background-color: #fff;
            display: none;
            width: 1240px;
            height: 300px;
            margin: 0 auto;
            padding: 0 30px;
            box-sizing: border-box;
            color: #333;
            border: solid 1px #e8e8e8;
            position: relative;
        }

        .contentBody.active {
            display: block !important;
        }
    </style>
</head>

<body>
    <!-- tab栏 -->
    <div class="navlist">
        <ul>
            <li class="active">
                <a href="javascript:;">tab1</a>
            </li>
            <li>
                <a href="javascript:;">tab2</a>
            </li>
            <li>
                <a href="javascript:;">tab3</a>
            </li>
        </ul>
    </div>

    <div class="navContent">
        <div class="contentBody active">content1</div>
        <div class="contentBody">content2</div>
        <div class="contentBody">content3</div>
    </div>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            $(".navlist li").click(function () {
                $(".navlist li").removeClass("active");
                $(this).addClass("active");
                var index = $(this).index();
                $(".contentBody").removeClass('active');
                $(".contentBody:eq(" + index + ")").addClass('active');
            });

        })
    </script>
</body>

</html>

 

posted on 2018-08-20 15:52  逢时  阅读(121)  评论(0)  编辑  收藏  举报

导航