• jquery插件:tabs页签


            .my-nav {
                clear: both;
            }

            .my-nav li {
                height: 30px;
                 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");
            })

      

  • 相关阅读:
    计算直线的交点数
    不容易系列之(4)——考新郎
    神、上帝以及老天爷
    N!
    Number Sequence
    33_ABB机器人智能周期保养与复位操作
    34_WorldZone区域监控功能的使用
    三菱PLC(FX3U)的模拟量应用
    第19集 PLC盒子的使用
    第18集 使用黑盒设计创建宏文件
  • 原文地址:https://www.cnblogs.com/samve/p/12527583.html
Copyright © 2020-2023  润新知