What is a tab column?
I think it's about keeping the same interior in one page, just letting a few different parts appear correctly, using the show and hide methods. It works by hiding everyone first, and then displaying the show, that is, by killing everyone to show me.
Why use tab columns
Make your pages more concise without too many redundant pages.

Recently, a web page found that there is not only one page under a header navigation. For example, in the header of a web page, there is usually a homepage, contact us, about us, product information... navigation box, but there are three or four pages inside the product information that are generally consistent with only a small part of the changes below.

In this case, of course, you would prefer to have only a few html pages in the navigation bar instead of three or more html pages for product information alone. At this point, you can use the tab bar to write only one page about bread, cakes, drinks,...

tab case

css section

//Clear Default Styles
* {
    margin: 0;
    padding: 0;
}
//Let the small dots of li disappear
li {
    list-style-type: none;
}
//Set the width and position of the navigation bar
.tab {
    width: 978px;
    margin: 100px auto;
}
//Set the style of ul inside the navigation bar
.tab_list {
    height: 39px;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}
//Set the style of ul inner li inside the navigation bar
.tab_list li {
    float: left;
    height: 39px;
    line-height: 39px;
    padding: 0 20px;
    text-align: center;
    cursor: pointer;
}
//Style the navigation bar that appears first by default
.tab_list .current {
    background-color: #c81623;
    color: #fff;
}
//Hide everything
.item {
    display: none;
}

html section

<!-- Navigation bar -->
<div class="tab">
    <div class="tab_list">
        <ul>
            <li class="current">Commodity introduction</li>
            <li>Specifications and Packaging</li>
            <li>Post-sale guarantee</li>
            <li>Commodity Evaluation (50000)</li>
            <li>Mobile Community</li>
        </ul>
    </div>
    <!-- Navigation bar corresponding module Each module needs one div package-->
    <div class="tab_con">
    	<!-- The first module displays first -->
        <div class="item" style="display: block;">
            Contents of commodity introduction module
        </div>
        <div class="item">
            Specifications and Packaging Module Contents
        </div>
        <div class="item">
            Contents of after-sales guarantee module
        </div>
        <div class="item">
            Contents of Commodity Evaluation (50000) Module
        </div>
        <div class="item">
            Mobile Community Module Content
        </div>

    </div>
</div>

Focus on the JavaScript section

// Get Elements
//Since we may have a lot of li tags when writing pages, here we get the div and then the li under it
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
//Get the content label corresponding to the navigation bar
var items = document.querySelectorAll('.item');

// for Loop Binding Click Event
for (var i = 0; i < lis.length; i++) {
    // Start setting index numbers for five small LIS 
    lis[i].setAttribute('index', i + "");
    lis[i].onclick = function() {
        // 1.On the Modules tab, click on one, the current background color will be red, and the rest will change the way the class name (exclusive thought)
        // Kill everyone else's remaining li Clear class
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        // Leave me alone 
        this.className = 'current';
        // 2.The following display content module
        var index = this.getAttribute('index', i);
        // Kill everyone and hide the rest of the item s
        for (var i = 0; i < items.length; i++) {
            items[i].style.display = 'none';
        }
        // Leave me alone to show the corresponding item
        items[index].style.display = 'block';
    }
}

Execution (JS section only):
1. Get the elements first, all the content item s that LIS and LIS need to correspond to
2. Use the for loop to iterate through the libind click events, which one gets clicked and which one performs the following actions
3. The clicked Lito does two things: first clear all lis'styles, and then add a style to itself
3. Change the content part after the Li part change is completed
4. First set a subscript index for all lis to link index to content; then get the subscript set in content
5. Then use the for loop to hide everything
6. Let index display the contents of the subscript
Problems encountered
My page is different from the example, and you may also encounter problems that I encounter, so let me share my solutions.
1. First there is a title product information about the left navigation bar of the content in the figure above, whether it can be set to a li, then let the index start from 1 when you set the index to the Li

The answer is no, because even if index starts from 1 and li still has one more, for loop traversal cannot start with subscripts.
My solution is to set the title "Product Information" directly to div so that it is not placed in ul li. Of course, my solution is not good. I have changed the settings in html and css. If you have a better way, please teach me ~

2.li null pointer exception

The null pointer exception here is because the title "Product Information" exists as a li, resulting in one more Li than an item, so when you click on the last Li there is no corresponding content to show it.
My solution is to set the title section to div without taking up li as above.

That's just a little bit of my learning about switching between tab bar and I hope you can correct it a little more.♥