javascript - 页面响应选项卡

标签 javascript html css

我想要一个 3 列布局来响应正在调整的页面大小。我想要它如何ESPN可以。我希望它是这样的，当它是中等大小时，它只显示两列，并且顶部会弹出一个菜单，让您可以选择查看刚刚完全消失的第三列。解释它的最好方法是 ESPN 的网站，并左右调整它的大小。我曾尝试使用“onclick”和 display none/block，但它与我的编写方式不符。

.global-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  display: flex;
  margin-top: 75px;
}
.center-container {
  height: auto;
  margin-bottom: 9px;
  margin-right: 1%;
  margin-left: 1%;
  display: inline-block;
  width: 80%;
}
.left-container {
  float: left;
  width: 28%;
  margin-left: .5%;
}
.right-container {
  float: left;
  width: 28%;
}
.responsive-menu {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.responsive-menu>ul {
  justify-content: space-between;
  list-style-type: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  position: relative;
  vertical-align: top;
  width: 100%;
  display: none;
  padding-top: 44px;
}
.responsive-menu>ul li {
  display: block;
  width: 100%;
  -webkit-box-flex: 1;
  flex: 1;
  text-transform: uppercase;
}
.responsive-menu>ul>li {
  line-height: 44px;
  list-style-type: none;
  text-align: center;
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.responsive-menu>ul li a {
  display: block;
  font-size: 12px;
  line-height: 44px;
  position: relative;
  text-align: center;
  width: 100%;
  text-decoration: none;
  color: #000;
}
.responsive-menu>ul li a:hover {
  color: blue;
}
.active {
  border-bottom: 3px solid #1E88E5;
  width: 60px;
}
.cards {
  width: 100%;
  height: auto;
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
  border-radius: 3px;
  min-height: 50px;
}
@media screen and (max-width: 1000px) {
  .right-container {
    display: none;
  }
  div.responsive-menu ul {
    display: inline-flex;
  }
  .global-container {
    margin-top: 10px;
  }
  #left-card {
    display: none;
  }
}
/*When smaller than 767 pixels*/

@media screen and (max-width: 767px) {
  .menu-button {
    display: block;
  }
  .top-nav {
    display: none;
  }
  .left-container {
    display: none;
  }
  .center-container {
    width: 100%;
  }
  #left-card {
    display: inherit;
  }
}
<div class="responsive-menu">
  <ul>
    <li id="left-card"><a href="#tab-1">Left</a>
    </li>
    <li id="center-card" class="active"><a href="#tab-2">Middle</a>
    </li>
    <li id="right-card"><a href="#tab-3">Right</a>
    </li>
  </ul>
</div>
<div class="global-container">
  <div class="left-container" id="tab-1">
    <div class="cards">Content for left container goes here</div>
  </div>
  <div class="center-container" id="tab-2">
    <div class="cards">Content for class center container Goes Here</div>
  </div>
  <div class="right-container" id="tab-3">
    <div class="cards">Content for right container goes here</div>
  </div>
</div>

最佳答案

好的，已经过测试并且可以正常工作。

JSfiddle 

$(function() {

  var $lef = $(".left-container");
  var $cen = $(".center-container");
  var $rig = $(".right-container");

  var $cards = $(".responsive-menu li");
  var $lefC = $("#left-card");
  var $cenC = $("#center-card");
  var $rigC = $("#right-card");

  function resize() {

    if (($(window).width() < 1000 || document.width < 1000) && $rigC.hasClass("active")) {
      $rig.show();
    } else {
      $rig.hide();
    };

    if (($(window).width() < 767 || document.width < 767) && !$rigC.hasClass("active")) {
      $lef.hide();
    } else if (($(window).width() > 767 || document.width > 767) && $lefC.hasClass("active")) {
      $cards.removeClass("active");
      $cenC.addClass("active");
      $cen.show();
    } else {
      $lef.show();
    };

    if ($(window).width() > 1000 || document.width > 1000) {
      $lef.add($cen).add($rig).show();
    }
  }
  resize();
  $(window).resize(function() {
    resize();
  });

  $cards.click(function() {
    $(".responsive-menu li").removeClass("active");
    $(this).addClass("active");
  });

  $lefC.click(function() {
    $lef.addClass("show").fadeIn(1000);
    $cen.fadeOut(1000);
    $rig.removeClass("show").fadeOut(1000);
  });

  $rigC.click(function() {
    $lef.removeClass("show").fadeOut(1000);
    $cen.fadeOut(1000);
    $rig.addClass("show").fadeIn(1000);
  });

  $cenC.click(function() {
    if ($(window).width() < 767 || document.width < 767) {
      $lef.removeClass("show").fadeOut(1000);
      $cen.fadeIn(1000);
      $rig.removeClass("show").fadeOut(1000);
    } else {
      $lef.removeClass("show").fadeIn(1000);
      $cen.fadeIn(1000);
      $rig.removeClass("show").fadeOut(1000);
    }

  });


});
.global-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  display: flex;
  position: relative;
}
.center-container {
  height: auto;
  margin-bottom: 9px;
  margin-right: 1%;
  margin-left: 1%;
  display: inline-block;
  width: 80%;
}
.left-container {
  float: left;
  width: 28%;
  margin-left: .5%;
  display: none;
}
.right-container {
  float: left;
  width: 28%;
  display: none;
}
.responsive-menu {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.responsive-menu>ul {
  justify-content: space-between;
  list-style-type: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  position: relative;
  vertical-align: top;
  width: 100%;
  display: none;
  padding-top: 44px;
}
.responsive-menu>ul li {
  display: block;
  width: 100%;
  -webkit-box-flex: 1;
  flex: 1;
  text-transform: uppercase;
}
.responsive-menu>ul>li {
  line-height: 44px;
  list-style-type: none;
  text-align: center;
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.responsive-menu>ul li a {
  display: block;
  font-size: 12px;
  line-height: 44px;
  position: relative;
  text-align: center;
  width: 100%;
  text-decoration: none;
  color: #000;
}
.responsive-menu>ul li a:hover {
  color: blue;
}
.active {
  border-bottom: 3px solid #1E88E5;
  width: 60px;
}
.cards {
  width: 100%;
  height: auto;
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
  border-radius: 3px;
  min-height: 50px;
}
@media screen and (max-width: 1000px) {
  .global-container {
    margin-top: 75px;
  }
  div.responsive-menu ul {
    display: inline-flex;
  }
  .global-container {
    margin-top: 10px;
  }
  #left-card {
    display: none;
  }
  .right-container.show {
    width: 100%;
    position: absolute;
  }
}
/*When smaller than 767 pixels*/

@media screen and (max-width: 767px) {
  .menu-button {
    display: block;
  }
  .top-nav {
    display: none;
  }
  .center-container {
    width: 100%;
  }
  #left-card {
    display: inherit;
  }
  .left-container.show {
    width: 100%;
    position: absolute;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="responsive-menu">
  <ul>
    <li id="left-card"><a href="#tab-1">Left</a>
    </li>
    <li id="center-card" class="active"><a href="#tab-2">Middle</a>
    </li>
    <li id="right-card"><a href="#tab-3">Right</a>
    </li>
  </ul>
</div>
<div class="global-container">
  <div class="left-container" id="tab-1">
    <div class="cards">LEFT</div>
  </div>
  <div class="center-container" id="tab-2">
    <div class="cards">CENTER</div>
  </div>
  <div class="right-container" id="tab-3">
    <div class="cards">RIGHT</div>
  </div>
</div>

使用 fadeIn() 的 jQuery 动画和 fadeOut() , 并隐藏它们 用 show() 显示和隐藏它们和 hide() .

关于javascript - 页面响应选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41318262/

上一篇：html - 如何使用 polymer 改变字体样式

下一篇：html - 如何在媒体查询(iPhone)中将视频定位到中心？

相关文章：

Javascript atob 没有正确解码 base64 字符串

css - 打印网页的安全像素宽度？

javascript - 将工具提示与公共(public)段落的左边距对齐

javascript - 使用 Google Apps 脚本操作 DOM

javascript - 在 react.js 中扩展样式对象

php - 在 PHP 中包含模板文件并替换变量

javascript - 将元数据添加到 Html5 文件上传

html - 在 Bootstrap 中截断长链接

javascript - 如何将 AjaxRequest 的响应添加到存储或将其显示在列表中

javascript - 从 javascript 调用 url

©2024 IT工具网  联系我们