zoukankan      html  css  js  c++  java
  • 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");
            })

      

  • 相关阅读:
    面向对象设计原则之接口隔离原则
    面向对象设计原则之开闭原则
    [OOD]违反里氏替换原则的解决方案
    错误程序
    error: ‘for’ loop initial declarations are only allowed in C99 mode
    函数模板
    查找
    队列类模板
    栈类模板
    单链表的结点类模板
  • 原文地址:https://www.cnblogs.com/samve/p/12527583.html
Copyright © 2011-2022 走看看