jQuery常用交互效果

一、点击div控制另一div的显示和隐藏

$(".con").bind("click",function(){
     var flag=$(".main").is(":hidden");
     if(flag){
         $(".main").addClass('animated fadeIn').show();
     }else{
         $(".main").removeClass('animated fadeIn').hide();
     }
});

jQuery 选择器(:hidden)详解:
元素可以被认为是隐藏的几个情况:

• 他们的CSS display值是none。
• 他们是type="hidden"的表单元素。
• 它们的宽度和高度都显式设置为0。
• 一个祖先元素是隐藏的，因此该元素是不会在页面上显示。

 注意：在jQuery中，visibility: hidden;和opacity: 0;都被视作可见的，因为它们在页面上占据了相应的物理空间。详情参考API.

二、返回顶部

 

$(".up").on("click",function(){
    $("html,body").animate({scrollTop:0},1500)
})

 三、jquery实现当页面下拉到一定位置时，右下角出现回到顶部图标。

showScroll();
function showScroll(){
    $(window).scroll(function(){
        var scrollValue=$(window).scrollTop();
        scrollValue>600?$(".fixed-right").fadeIn():$(".fixed-right").fadeOut();
    });
    $(".fix-top").click(function() {
        $("html,body").animate({scrollTop:0}, 200);
    });
}

四、js返回上一页/上一层

window.history.go(-1);

或者

window.history.back().

返回下一页：window.history.forward()

返回第几页： window.history.go(返回第几页,也可以使用访问过的URL)，比如 window.history.go(-2)为返回后两页。

 五、tab选项卡切换不同内容举例：

var gtit=$(".group-tit>a");
var gcon=$(".group-content");
gtit.click(function() {
    var id=$(this).data('id');
    // console.log(id);
    $(this).addClass('active').siblings().removeClass('active');
    gcon.hide().eq(id).show();
});