First, I want to show the reference to be realized.

Every time I wrote with some interaction, I always wanted to use javascript to achieve it. But later, in the communication with my colleagues, now I develop it. If I have to use javascript to achieve it, I usually prefer css to achieve it.

The content of the HTML section:

<div class="district_experience_share white_vessel">
   <div class="tab">
    //tab is part of the navigation of the area (using the sliding effect, this operation seems to be very convenient)
      <ul>
        <li class="selected">Hottest</li>
        <li>Xuhui District</li>
        <li>Minhang District</li>
        <li>Jing'an District</li>
        <li>Hongkou District</li>
        <li>Pudong New Area</li>
        <li>Qingpu District</li>
        <li>Changning District</li>
      </ul>
  </div>

  //Here is the content block displayed by clicking on the navigation area.
  <div class="tab-content-list">
      <div class="tab_box selected">
        <ul>
          <li>
            <a href="">
              <div class="user_content">
                //Here is the content of the display section after switching (that is, the content block shown in the fast part of the color area above, I will not write it out.)
              </div>
            </a>
          </li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="tab_box">
        <ul>
          <li>
            <a href="">
              <div class="user_content">
                //Here is the content of the display section after switching (that is, the content block shown in the fast part of the color area above, I will not write it out.)
              </div>
            </a>
          </li>
          <li></li>
          <li></li>
        </ul>
      </div>
  </div>
</div>

SCSS section (css upgrade):

.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;
            //Underline at the bottom of navigation area is achieved by absolute positioning of pseudo-class.
            &::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 section (logical operation of switching display content blocks):

  $(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');
    });
  });

After each click, the program automatically adds selected click status to the current selector by default. It will directly control the effect of the switch after clicking.
One thing to note here is that in the top switching area, you need to use flex layout and positioning to control, the distance between navigation blocks (such as Jing'an area) and other adjacent blocks, and sometimes the bottom green underscore does not always remain the same length as the text.

Here is a list of effects for your reference:

In this case, you will find that the position of words and lines is not exactly aligned. If there are fewer words, you feel almost aligned. If there are more words, you will find that the position of the two deviations is more obvious. There are two reasons for this situation.

1. When setting up pseudo-classes, pseudo-classes will change the first element after 15 PX pixels. (Note the effect of the left and right spacing values on the style)
2. When the pseudo-Class is selected by selected, the width of width without setting line is 100% of that of text.

At this point, the implementation process is all over, the development process will inevitably have some incomplete ideas, I believe there will certainly be a better way to achieve. Working together, communicating with each other