jquery插件：tabs页签

时间：2020-03-19 22:30:21 阅读：82 评论：0 收藏：0 [点我收藏+]

        .my-nav {
            clear: both;
        }

        .my-nav li {
            height: 30px;
            width: 100px;
            float: left;
        }

        .my-tab-content {
            clear: both;
        }

        .tab-panel {
            display: none;
        }

        .tab-panel.active {
            display: block;
        }

        a.disable {
            color: #999999;
            text-decoration: none;
        }

                        <!-- Nav tabs -->
                        <ul class="my-nav">
                            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                    data-toggle="tab">Home</a></li>
                            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                    data-toggle="tab">Profile</a></li>
                            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
                                    data-toggle="tab">Messages</a></li>
                            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
                                    data-toggle="tab">Settings</a></li>
                            <li role="presentation"><a href="#forbid" class="disable">禁止</a></li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="my-tab-content">
                            <div class="tab-panel active" id="home">1</div>
                            <div class="tab-panel" id="profile">2</div>
                            <div class="tab-panel" id="messages">3</div>
                            <div class="tab-panel" id="settings">4</div>
                            <div class="tab-panel" id="forbid">5</div>
                        </div>

        $(".my-nav li a").click(function () {
            let id = $(this).attr("href").substring(1);
            $(".tab-panel").removeClass("active");
            $("#" + id).addClass("active");
            $(".disable").attr("disabled", true).css("pointer-events", "none");
        })

jquery插件：tabs页签

原文：https://www.cnblogs.com/samve/p/12527583.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)