点击menu导航切换，显示不同的内容模块

最新推荐文章于 2023-10-21 20:03:09 发布

冯冯墨墨

最新推荐文章于 2023-10-21 20:03:09 发布

阅读量1.3w

点赞数 3

文章标签： javascript html css 导航 menu

本文链接：https://blog.csdn.net/qq_33072593/article/details/77504116

版权

先上张需要实现的参考图：

这里写图片描述

之前每次写带些交互的时候，总想着用javascript来实现，但是后来跟同事的交流下，现在开发，如果不得已一定要使用javascript来实现，一般我都会首选css来实现。

HTML 部分的内容：

<div class="district_experience_share white_vessel">
   <div class="tab">
    //tab是区域部分的导航(运用到了 滑动的效果，这种操作看起还是很方便的)
      <ul>
        <li class="selected">最热</li>
        <li>徐汇区</li>
        <li>闵行区</li>
        <li>静安区</li>
        <li>虹口区</li>
        <li>浦东新区</li>
        <li>青浦区</li>
        <li>长宁区</li>
      </ul>
  </div>

  //这里是点击导航区域显示的内容块
  <div class="tab-content-list">
      <div class="tab_box selected">
        <ul>
          <li>
            <a href="">
              <div class="user_content">
                //这里是切换后展示部分的内容(也就是上图有颜色区域快部分展示的内容块，我就不写出来了)。。。
              </div>
            </a>
          </li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="tab_box">
        <ul>
          <li>
            <a href="">
              <div class="user_content">
                //这里是切换后展示部分的内容(也就是上图有颜色区域快部分展示的内容块，我就不写出来了)。。。
              </div>
            </a>
          </li>
          <li></li>
          <li></li>
        </ul>
      </div>
  </div>
</div>

SCSS部分(css升级版)：

.district_experience_share {
  margin-bottom: 10px;
    .tab {
      white-space: nowrap;
      overflow-y: hidden;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      border-bottom: 0.5px solid #ddd;
      ul {
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        display: flex;
        li {
          display: inline-block;
          flex: 1;
          position: relative;
          text-align: center;
          max-width: 50%;
          cursor: pointer;
          margin-left: 15px;
          &:first-child {
            margin-left: 15px;
          }
          &:last-child {
            margin-right: 15px;
          }
          &.selected {
            color: #49c114;
            //导航区域底部下划线是通过伪类的绝对定位来实现的
            &::after {
              content: "";
              height: 2px;
              width: 100%;
              background: #49c114;
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }
        }
      }
    }
  }
  .tab_box {
    padding-bottom: 5px;
    display: none;
    &.selected {
      display: block;
    }
    ul > li {
      border-bottom: none;
      padding: 0;
      border-radius: 5px;
      vertical-align: top;
      white-space: normal;
      margin-bottom: 10px;
      padding-bottom: 10px;
    }
  }

JS部分(切换显示内容块的逻辑操作)：

  $(function () {
    $(".district_experience_share .tab ul li").click(function() {
      if ($(this).hasClass("selected")) {
        return;
      }
      var $parent = $(this).parent();
      var $tab_content_list = $('.district_experience_share .tab-content-list');
      $('.selected', $parent).removeClass('selected');
      $('.selected', $tab_content_list).removeClass('selected');
      $(this).addClass('selected');
      $('.tab_box', $tab_content_list).eq($(this).index()).addClass('selected');
    });
  });

每次点击选中之后，程序会默认的给当前的选择器上自动加selected的点击选中状态。就会直接控制点击后的切换的效果。
这里需要注意的一点就是，在顶部切换区域，你要使用flex的布局和定位来控制好，导航区块（如静安区）和其他相邻的区块之间的间距，还有就是有时候底部绿色下划线并不一直保持和文字在同一个长度上。

下面列举一种效果给你做个参考：

这里写图片描述