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");
            })

      

  • 相关阅读:
    MVVM架构~knockoutjs系列之验证信息自定义输出~再续
    数据挖掘:实用案例分析
    实际中碰到的一个异构系统之间数据交换的处理方式设计
    连载:现代无线电接收机的系统噪声系数分析一 级联接收机的计
    hadoop的一些名词解释
    【ArcGIS 10.2新特性】ArcGIS 10.2 for Desktop 新特性(一)
    Visual Studio Tips: How to change project namespace
    PHP 类属性 类静态变量的访问
    ios日历视图实现日期输入
    简说一下coffeescript的constructor是如何导致Backbone.View的事件无法正常工作的.
  • 原文地址:https://www.cnblogs.com/samve/p/12527583.html
Copyright © 2011-2022 走看看