table 点击切换

<!-- 没有css 懒... -->

<!-- HTML -->
    <ul class="sideslip-head">
        <li class="active"><span>1111</span></li>
        <li><span>22222</span></li>
        <li><span>33333</span></li>
    </ul>
    
    <div class="sideslip-box">
        <ul class="sideslip-titles">
            <li>11111</li>
        </ul>
        <ul class="sideslip-titles">
            <li>222222</li>
        </ul>
        <ul class="sideslip-titles">
            <li>33333</li>
        </ul>  
    </div>

/* JQ */
$(".sideslip-head>li").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
        $(".sideslip-titles").eq($(this).index()).css("display","block").siblings().css("display","none")
})

导航 滚动到指定位置后 悬浮

/*  

没有css
没有html
懒...

*/

/* JQ */
$(window).scroll(function(){
    var bignav = $(".导航名字");
    if( $(this).scrollTop() >195){
        bignav.addClass('导航置顶后的转变款式 的名字'); // 导航css不转变 能够删掉该行
        bignav.css({
            width:"100%",
            position:"fixed",
            top:50,
            zIndex:10
        });
    }
    else{
        bignav.removeClass('导航置顶后的转变款式 的名字'); // 导航css不转变 能够删掉该行
        bignav.css("position","static");
    }
});

点击按钮显现/ 隐蔽 点击别处隐蔽 点击浮层不动

/* css */


.wrapper{
    position:relative;
    display:inline-block;
}
    .popover{
        display: none;
        border:1px solid red;
        position:absolute;
        left:50px;
        top:0;
        white-space:nowrap;
        padding:10px;
        margin-left:10px;
        background: white;
    }
    .popover::before{
        position:absolute;
        right:100%;
        top:0;
        border: 10px solid transparent;
        border-right-color:red;
        content:'';
    }
    .popover::after{
        position: absolute;
        right:100%;
        top:0;
        border:10px solid transparent;
        border-right-color: white;
    }

<!-- html -->

<div id="wrapper" class="wrapper">
    <button id="clickMe">点我</button>
    <div id="popover" class="popover"><input type="checkbox">浮层</div>
</div>

//jq 要领1：点击本身能隐蔽 其他功用 和要领2 一样

$(clickMe).on('click',function (ev) {
    ev.stopPropagation();
    $(popover).slideToggle(); //slideToggle 这个可换
    
    var flag = true;
    $(document).bind("click",function(e){
        var target = $(e.target);
        if(target.closest($(clickMe)).length == 0 && flag == true){
            $(popover).slideUp();
            flag = false;
        }
    });
});

//jq 要领2：点击本身不不不不不不不能隐蔽 其他功用 和要领1 一样

$(clickMe).on('click',function () {
    $(popover).show()
    $(document).one('click',function(){
        console.log('document')
        $(popover).hide()
    })
})
$(wrapper).on('click',function(e){
    e.stopPropagation()
})