小编Cho*_*bit的帖子

我还是比较新的jQuery和学习,我创建了下面的代码/脚本,做什么,我需要,但我必须建立一个新的功能,为每一个选择和我的目标和添加的代码将获得长期到底是我打算至少有10个选择器和目标.

所以,当你将鼠标悬停在选择器(按钮)它增加了一个主动类到该按钮(从其他按钮删除它),并停留在,直到您选择另一个按钮,而在同一时间切换淘汰目标(不同的IMG在这种情况下).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<style>
body {
    background:grey;
}
#terrace-fw-wrap {
    display:block; 
    width:100%;
    max-width:600px;
    margin: auto;
    text-align: center;
}

#terrace-fw-wrap .content {
    display:block; 
    width:100%;
}

#terrace-fw-wrap .content .img {
    display:none; 
    width:100%;
}

.active-img {
    display:block !important; 
    width:100% !important;
}

#terrace-fw-wrap .buttons .but {
    display:inline-block; 
    width:150px;
    padding:10px;
    margin:10px;
    text-align: center;
    color:black;
    background:white;

}

#terrace-fw-wrap .buttons .but:hover {
    color:white;
    background:black;
    cursor: pointer;
}

.active-but {
    color:white !important;
    background:black !important;

}

</style>

<section id="terrace-fw-wrap">
    <section class="content">
        <img class="img img1 active-img" src="http://s9.postimg.org/oatcz7bpr/img1.jpg" />
        <img …

<div class="first"></div>
<div class="second"></div>

我试着用CSS这样做对其进行更改float:left与float:right和下扭转它@media (max-width:820px),我相信在过去的工作,但没有工作的查询.

尝试了一个简单的JQuery:

if ($(window).width() < 820) {
   $( ".first" ).insertAfter( $( ".second" ) );
}
else {
   $( ".first" ).insertBefore( $( ".second" ) );
}

我知道这应该是如此简单,但它不是在打球,我做错了什么？

使用我看到的一些例子,当你向下滚动页面时,我已经回到顶部按钮显示并工作,但是有一种方法可以让按钮粘在屏幕底部直到你到达页脚它会粘在页脚的顶部？

到目前为止这是我的代码:

<script type="text/javascript" defer="defer">
    $(window).scroll(function() {
        if ($(this).scrollTop()) {
            $("#toTop").fadeIn();
        } else {
            $("#toTop").fadeOut();
        }
    });


    $("#toTop").click(function() {
        $("html, body").animate({scrollTop: 0}, 1000);
    });
</script>

<style type="text/css">
    .backtotop_button_wrap {width:100%; background:white; height:auto;}
    .backtotop_button_height {width:100%; height:55px;}
    #toTop {display:none; position: fixed; right:0; bottom:0; width:100px; height:auto; background:white; float:right; padding:10px; text-align:center; border:1px solid black; line-height:12px;}
    #footer {width:100%; height:500px; color:white; text-align:center; background:#313131; border-top:1px solid black;}
</style>

<div class="backtotop_button_wrap">
    <div class="backtotop_button_height">
        <div id="toTop">^<br />Back to the Top</div>
    </div>
</div>
<div id="footer">
Footer
</div>

我也在这里做了一个Jfiddle:http …