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

      

  • 相关阅读:
    Java & XML学习笔记
    爱情与婚姻
    压缩数据以节省空间和提高速度(网上摘取)
    网线的直连线与交叉线
    java虚拟机 堆内存设置
    如何在 JavaScript 中实现拖放
    这几天遇上个问题,在SQL SERVER存储过程中提示字符串格式不正确
    如何编程实现VB.NET数据集中的数据导出到EXCEL
    SQL SERVER的数据类型
    终于拥有了自己的BLOG了!庆祝一下!^_^
  • 原文地址:https://www.cnblogs.com/samve/p/12527583.html
Copyright © 2011-2022 走看看