This article is from the Aliyun-Yunqi community, click on the original article Here.

tabsMode mainly summarizes two ways to implement tabs switching: JavaScript / jQuery, and finally implements a component development of jQuery.

overall design

• The entire tab design can be designed as a large box (div) with two small boxes (div) nested inside.
• The above box (div), which is mainly placed in the navigation bar, is similar to the classification.
• The upper box is designed to be a navigation bar by ul and several li tags.
• The following box (div) is the main content for each category.
• In the lower box, a smaller div equal to (li) is added to place the corresponding subject content.

    <div class="tab" id="tab">
        <ul class="tab-title" id="tab-title">
            <li class="select"><a href="#">Notice</a></li>
            <li><a href="#">rule</a></li>
            <li><a href="#">forum</a></li>
            <li><a href="#">security</a></li>
            <li><a href="#">public welfare</a></li>
        </ul>

        <div class="tab-content" id="tab-content">
            <div class="tab-ct" style="display: block">ct1</div>
            <div class="tab-ct" style="display: none;">ct2</div>
            <div class="tab-ct" style="display: none;">ct3</div>
            <div class="tab-ct" style="display: none;">ct4</div>
            <div class="tab-ct" style="display: none;">ct5</div>
        </div>
    </div>

JavaScript development pattern

• The main code is as follows:

    function $(id) {
        return typeof id == "string"?document.getElementById(id):id;
    }
    window.onload = function () {
        var titleName = $("tab-title").getElementsByTagName("li");
        var tabContent = $("tab-content").getElementsByTagName("div");
        if(titleName.length != tabContent.length){
            return;
        }
        for(var i = 0;i < titleName.length;i++){
            titleName[i].id = i;
            titleName[i].onmouseover = function () {
                for(var j = 0;j<titleName.length;j++){
                    titleName[j].className = "";
                    tabContent[j].style.display = "none";
                }
                this.className = "select";
                tabContent[this.id].style.display = "block";
            }
        }
    } ;

1. Determine whether the number of ul li is equal to that of tab-ct.
2. Events triggered by our mouse (mouseover, click.) To carry out the corresponding operation
3. Synchronization between tab-title and tab-content by two nested traversal loops
4. Because the tab-content part only shows the corresponding location of the tab-ct at each time when it is designed, the first tab-ct is pre-designed when the page is constructed, and the rest is hidden.
5. When our mouse event moves to the third position, we add the style we want to the corresponding title and display the content.

jQuery Development Model

• The main code is as follows:

  $(document).ready(function () {
  var titleName = $(".tab-title li");
  var tabContent = $(".tab-content div");
  
  if(titleName.length != tabContent.length){
      return;
  }
  titleName.mouseover(function () {
      var index = $(this).index();
      $(this).addClass("select").siblings().removeClass("select");
      tabContent.eq(index).show().siblings().hide();
  });
  });
  

  1. Determine whether the number of ul li is equal to that of tab-ct.
  2. Events triggered by our mouse (mouseover, click.) To carry out the corresponding operation
  3. jquery operates by triggering events, which is slightly simpler than JavaScript.
  4. Because the tab-content part only shows the corresponding location of the tab-ct at each time when it is designed, the first tab-ct is pre-designed when the page is constructed, and the rest is hidden.
  5. When our mouse event moves to the third position, we add the style we want to the corresponding title and display the content.

Implementing a Component Development of jQuery

• In order to realize component development, it is necessary to extract the common parts and display them in the form of parameter configuration.

• Page section

  <div class="js-tab tab" data-config='{
                              "triggerType":"mouseover",
                              "effect":"fade",
                              "invoke":1,
                              "auto":2000}'>
      <ul class="tab-nav">
          <li class="actived"><a href="javascript:void(0)">Journalism</a></li>
          <li><a href="#">Film</a></li>
          <li><a href="#">entertainment</a></li>
          <li><a href="#">science and technology</a></li>
      </ul>
  
      <div class="content-wrap">
          <div class="content-item current">
              A
          </div>
          <div class="content-item">
              B
          </div>
          <div class="content-item">
              C
          </div>
          <div class="content-item">
              D
          </div>
      </div>
  </div>
  

• The page section needs a function that calls componentized js

  <script type="text/javascript">
  $(function () {
  var tab1 = new Tab($(".js-tab").eq(0));

Spread out the full text