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

      

  • 相关阅读:
    会声会影教程之图片音乐相册制作
    js校验表单后提交表单的三种方法总结(转)
    如何避免后台IO高负载造成的长时间JVM GC停顿(转)
    nginx的upstream目前支持5种方式的分配(转)
    Nginx配置文件详细说明(转)
    如何将character_set_database latin1 改为 gbk(转)
    Maven打包可执行Jar包方式
    六种微服务架构的设计模式(转)
    Linux Shell 命令
    Condition的await-signal流程详解(转)
  • 原文地址:https://www.cnblogs.com/samve/p/12527583.html
Copyright © 2011-2022 走看看