preface

Tab navigation bar switching is very common in web page scenarios. This paper will introduce how to use js to realize interactive navigation bar.

analysis:
1. When the mouse clicks the corresponding tab above, the contents of the box below will change
2. Click an option, the current background color will turn red, the font will turn white, and the rest will remain unchanged.
3. The display contents of the following modules need to correspond to the tabs above one by one and match each other.
Idea: you can add a custom attribute (index number) to the tab, and the attribute value is numbered from 0. When you click a tab, the following module displays the content of the corresponding index, and the rest is hidden. (exclusive thought)

design sketch:

1, Custom properties

1. Purpose of custom attribute

In order to save and use data, complex operations can be avoided, and the data does not need to be stored in the database.

2. User defined attribute operation

The custom attribute is different from the element's own attribute. It is an attribute defined by the programmer. Operations on properties no longer use the object In the form of "attribute", the following three operation methods are introduced with examples:
<div data-index='1'></div>

div.getAtrribute('data index '): get the value of the attribute data index
div.setAttribute('data set ',' 2 '): add attribute data set with value of' 2 '
div.removeAttribute('data set '): remove the data set attribute

3. Specifications

Because some user-defined attributes are easy to cause differences, it is not easy to judge whether it is the built-in attribute or self-defined attribute of the element. H5 stipulates that the beginning of the user-defined attribute data - is used as the attribute name and assigned value.
At the same time, it also introduces the dataset collection, which is a collection of all user-defined attributes starting with data. We can use it to value.
For example:
<div data-index='0'></div>
Use div.dataset[index '] or div.dataset Index value

2, Implementation of navigation bar

1. Static style

HTML:

<div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">Product introduction</li>
                <li>Specification and packaging</li>
                <li>Commodity evaluation(100 ten thousand+)</li>
                <li>After sales guarantee</li>

            </ul>
        </div>
        <div class="tab_con">
            <div class="item">
                Brand: Apple Trade name: AppleiPhone 12 Operating system: iOS(Apple) Commodity No.: 100009077475 commodity gross weight: 320.00g
            </div>

            <div class="item">
                Specification and package main body first sale date: 23rd Product Name: iPhone 12 Listing month: October network model: A2404 Year of listing: 2020
            </div>
            <div class="item">
                The operation of commodity evaluation is very smooth and easy to get⑤Thousand one, I got it from the video below! The photo effect is first-class. I like this new purple very much. It has beautiful appearance design, outstanding screen display and perfect sound quality. The packaging of the mobile phone is also very good. The delivery speed is very fast. It's very beautiful. I like it very much. Two cameras to take pictures, soon 5 G The running speed is also great, very satisfied. The sound quality of dual speakers is great. The new design looks very gorgeous, feels very good, and the glass texture is very good. The system confirms that it is much smoother than Android, the size is just right, it will not be too large, the screen is delicate, and the color restoration degree is high. It adopts Qualcomm baseband, 5 G The signal is still good. The Internet speed is fast. I especially like purple. My appearance is very high. I can't help but love it. When the collection money comes to buy it, this Jingdong Mall activity will start with great efforts. It is very smooth, the screen display is exquisite, it looks very comfortable, the night scene is greatly improved, and the effect is very in line with Apple's level, which is no different from previous apple home Key, it takes some time to adapt. The exterior size of the mobile phone is just right, and it is also very suitable for the classic right angle side design. It feels very good, with smooth startup, sensitive keys, fast operation speed, long standby time, good sound effect, clear photos and sufficient memory! Immediately downloaded a lot of practical software, very happy! It's just too small. It's very easy. The classic straight border feels good. Apple's advantage is the system. Needless to say, the system is synonymous with smooth operation. It is very smooth, the screen display is exquisite, it looks very comfortable, the night scene is greatly improved, and the effect is very in line with Apple's level.
            </div>
            <div class="item">
                Content of after-sales guarantee module manufacturer's service the warranty period of this commodity is 1 year, and maintenance application can be submitted within this time range. Please refer to the manufacturer's service for details. In case of quality problems or faults, with the quality inspection certificate of the manufacturer's maintenance center or special maintenance point, you can enjoy the three guarantee services such as return within 7 days, exchange within 15 days, and free warranty within the warranty period for more than 15 days! (notes:If the manufacturer has instructions on after-sales guarantee in the product introduction,Then the product shall be provided with after-sales guarantee service according to the manufacturer's instructions.)
            </div>
        </div>
    </div>

CSS:

<style>
        .tab {
            margin: 0 auto;
            width: 800px;
            padding-top: 20px;
        }
        
        .tab_list {
            height: 50px;
            border-bottom: 1px solid red;
        }
        
        .tab_list ul {
            padding-left: 0px;
            height: 50px;
        }
        
        .tab li {
            float: left;
            display: inline-block;
            box-sizing: border-box;
            padding-left: 20px;
            padding-right: 20px;
            text-align: center;
            height: 50px;
            line-height: 50px;
            margin: 0;
        }
        
        .item {
            display: none;
        }
        
        .current {
            background-color: brown;
            color: white;
        }
    </style>

2.JS realizes interaction

<script>
        var tab_list = document.querySelector('.tab_list');
        var list = tab_list.querySelectorAll('li');//Get all tab labels

        var items = document.querySelectorAll('.item');//Get all content display modules
		//Add click events to the loop and index each tab
        for (var i = 0; i < list.length; i++) {
            list[i].setAttribute('index', i);
            //Exclusive thought
            list[i].onclick = function() {
            	//1. After clicking, first eliminate the style of all tabs
                for (var i = 0; i < list.length; i++) {
                    list[i].className = '';
                }
                //2. Bind the style of the current tab (change the background color to red)
                this.className = 'current';
                
                //Content display module
                var index = this.getAttribute('index');//Get the index value of the currently clicked tab first
                //1. Hide all modules
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                //2. Display the module under the corresponding index
                items[index].style.display = 'block';
            }
        }
    </script>

summary

The above is a simple Tab navigation bar switching process. Based on the above effects, you can also add transition animation to make the switching effect more dynamic.