如何使用jquery在旋转木马上隐藏和显示页脚

How hide and show footer above carousel with jquery?

本文关键字:显示 隐藏 何使用 jquery 旋转木马      更新时间:2023-09-26

我希望在加载主页时隐藏页脚,并在单击showhide按钮时显示和隐藏页脚我的按钮代码可以很好地显示和隐藏页脚我的问题是:页面加载时如何隐藏页脚,以及如何在转盘上方插入页脚?谢谢

$(document).ready(function () {
  $("#hide").hover(function () {
    $("footer").hide(1000);
  });
  $("#show").hover(function () {
    $("footer").show(1000);
  });
});
<div style="margin-left: auto; margin-right: auto;">
  <div style="padding: 0;">
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
      <div class="carousel-inner">
        @foreach (var item in Model.Carousels)
        {
        if (item == Model.Carousels.FirstOrDefault())
        {
        <div class="item active ">
          <img style="height:380px; width:100%;" class="img-responsive center-block" src="@Url.Content(item.CarouselImage.ToString())">
          <div class="carousel-caption">
            <h2 class="h">@item.CarouselSubject</h2>
            <h4 class="h">@item.CarouselInfo</h4>
          </div>
        </div>
        }
        else
        {
        <div class="item">
          <img style="height: 380px; width: 100%;" class="img-responsive center-block" src="@Url.Content(item.CarouselImage.ToString())" />
          <div class="carousel-caption">
            <h2 class="h">@item.CarouselSubject</h2>
            <h4 class="h">@item.CarouselInfo</h4>
          </div>
        </div>
        }
        }
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
  <div class="text-center">
    <button id="hide">Hide</button>
    <button id="show">Show</button>
  </div>
  <footer class="footer" style="background-color:#191919; text-align:center;color:GrayText;clear:both;margin-bottom:-30px;">
    <div>
      <ul style="display: inline-block; text-align: right; list-style-type: none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">quick</li>
        <li class="list-group-item"><a class="Alist" href="">login</a></li>
        <li class="list-group-item"><a class="Alist" href="">sign up</a></li>

      </ul>
      <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">manu</li>
        <li class="list-group-item"><a class="Alist" href="">text5</a></li>
        <li class="list-group-item"><a class="Alist" href="">text6</a></li>
        <li class="list-group-item"><a class="Alist" href="">text7</a></li>
      </ul>
      <ul style=" display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold; padding-bottom:10px;" class="list-group-item">follow us</li>
        <li class="list-group-item">
          @foreach (var item in Model.SocialNetworks)
          {
          <ul style=" display:inline-block;text-align:right;list-style-type:none;">
            <li>
              <a href="@item.SocialLink">
                <img class="img-responsive center-block socialIcon" src="@Url.Content(item.SocialIcon.ToString())" />
              </a>
            </li>
          </ul>
          }
        </li>
      </ul>
    </div>
    <div>
      <hr style="width: 70%; background-color: #5d5d5d; height: 0.5px; border: 0 none; " />
    </div>
    <div style="text-align:center;">
      <span style="text-align:center;">&copy;</span>
    </div>
  </footer>
</div>

如前一个答案所述,请使用此选项隐藏页脚:

$(document).ready(function(){
  $("footer").hide();
});

要插入关于转盘的footer,可以使用:

$("footer").insertBefore(".carousel");

这是为了在页面加载时隐藏页脚:

$(document).ready(function(){
 $("footer").hide();
});

对于转盘上方的插入页脚:

$("footer").insertBefore("#myCarousel");