JavaScript implements Tab bar switching effects

<div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">Product Introduction</li><!-- The first li is selected by default, current determines the style of red background and white text-->
                <li>Specifications and packaging</li>
                <li>After-sales guarantee</li>
                <li>Product Reviews (50,000)</li>
                <li>Mobile Community</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;"><!-- This item is displayed by default, because the display value of all items is none -->
                Product introduction module content</div>
            <div class="item">
                Specifications and packaging module content</div>
            <div class="item">
                After-sales guarantee module content</div>
            <div class="item">
                Product reviews (50000) module content</div>
            <div class="item">
                Mobile community module content</div>
 
        </div>
</div>

<script>
        // Business requirement: Click on the tab bar. The clicked tab bar has a different style, and the div below it should also be switched to achieve the effect of changing the content var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var tabs = document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('data-index', i); // Add a data-index custom attribute to each li, the value is its own subscript in lis, this value mainly allows us to determine which li we are currently clicking on, so as to help us modify the display value of the corresponding div later lis[i].onclick = function () {
                // 1. The first step is to use the exclusive idea to assign a class attribute to the user who clicks it. Note that the class values ​​of other unclicked items need to be left empty. This is the exclusive idea of ​​killing others and leaving me alone for (var i = 0; i <lis.length; i++) {
                    lis[i].className = ''; // Use a loop to empty the class name of everyone (including yourself)}
                // Then modify the class name for yourself and leave it to myself this.className = 'current'; // The CSS style of the current class name has been written// Then the tab bar style above needs to be processed. The second step is to display the corresponding subordinate div of whoever is clicked, and hide the others that have not been clicked. Here it is mainly necessary to first know who the user clicked, and then set the display of the object div to block. Still need to use exclusive thinking to do it // Step 2: Modify the display attribute value of div according to the click var index = this.getAttribute('index'); // Get the index of the currently clicked li
                for (var i = 0; i < lis.length; i++) { // Use a loop to set the display of each item to none, thus killing everyone tabs[i].style.display = 'none';
                }
                // In tabs, lock the item corresponding to the index of li and change its display value to block, leaving me alone tabs[index].style.display = 'block';
            }
        }
</script>