JS/ JQ 常用小特效【持续更新中】

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