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

来源：互联网发布：网络变压器加工图编辑：程序博客网时间：2024/04/24 01:55

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

这里写图片描述

之前每次写带些交互的时候，总想着用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的布局和定位来控制好，导航区块（如静安区）和其他相邻的区块之间的间距，还有就是有时候底部绿色下划线并不一直保持和文字在同一个长度上。

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

这里写图片描述

像这种情况，你会发现，文字和线的位置并没有完全对齐，如果文字少的话，你感觉上差不多对齐了，如果文字比较多，你就会发现，两者偏离的位置更明显，出现这种情况有两个原因，

1.设置伪类的时候，伪类把第一个元素居左了15px像素之后，后面的也会相应的做变动。（注意左右的间距值对样式的影响）
2. 在selected选中伪类的时候，没有设置线的width宽度相对文字的100%展示。

至此，实现过程全部结束，开发过程难免也会有想得不全面的地方，相信肯定会有更好的实现方式。一起努力，共同交流～

阅读全文

0 0