JavaScript to achieve the effect of tab bar switching

Tab bar: Click different tabs to display different contents, and the style of the clicked tab will change (highlighting the selected one)

Implementation ideas:

1. Divide the tab bar into two parts, the upper part is the navigation list, and the lower part is the corresponding content of each part. Write out the tags and content. Write the content in the order of the tags. Add a custom attribute - - -index to each tag. The attribute value starts from 0 and increases by 1.

2. First, realize the above effect. After clicking, the style switches, and the font color and background color of the clicked text change, etc.:

①css defines a class eg: current, which defines the changed style. First, write a class name for the first tag, and do not write class names for the others.
②js obtains all tag element objects, - - -for loop- - -traverses and binds each tag - - -onclick click event ③uses exclusive algorithm in click event - - -for loop- - -sets the class name of all tags to empty - - -className = '', and then sets the special class name defined above to the currently clicked tag - - -this.className = 'current';

3. Implement the following, and different content will appear depending on the label you click:

①css displays the content corresponding to the first tag and hides the others:

.box-tb .item:nth-child(n+2) {
display: none;
}

② Get all element objects of the content, get the index value of the tag, and add an exclusive thought code in the click event - - -for loop - - -traverse the element objects of the content, set all content to be hidden - - -items[i].style.display = 'none'; then display the corresponding content according to the clicked tag - - -items[index].style.display = 'block';

Code example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab bar switch</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        .box {
            width: 600px;
            margin: 100px auto;
        }
        
        .box-th {
            overflow: hidden;
            width: 100%;
            background-color: #88ace6;
        }
        
        .box-th ul li {
            float: left;
            width: 90px;
            height: 20px;
            margin-right: 10px;
            padding: 5px;
            text-align: center;
        }
        
        .current {
            color: #fff;
            background-color: green;
        }
        
        .box-tb {
            margin-top: 20px;
        }
        
        .box-tb .item:nth-child(n+2) {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-th">
            <ul>
                <li data-index="0" class="current">Spring</li>
                <li data-index="1">Summer</li>
                <li data-index="2">Autumn</li>
                <li data-index="3">Winter</li>
            </ul>
        </div>
        <div class="box-tb">
            <div class="item">Spring is the first of the four seasons, and a new cycle begins from then on. Spring represents warmth and growth, with plants sprouting, warm winds and sunshine, and birds singing and flowers blooming. The temperature, sunshine and rainfall in this season are at a turning point of the year and tend to rise or increase. In spring, the yin and yang energies begin to transform, and all things sprout and grow as the yang energy rises. Spring is the season for growth and for spring ploughing and sowing, as the saying goes, "A year's plan begins in spring." Beginning and end of spring: Divided according to changes in astronomical phenomena: Traditionally, spring starts at "Lichun" (when the Big Dipper points to Yin and the sun reaches 315° of the ecliptic longitude) and ends at "Lixia". Division based on temperature changes: In modern times, the "parity mean temperature" division of scholar Zhang Baokun is adopted. Spring begins when the parity mean temperature (the average of the temperature for 5 consecutive days) rises steadily from below 10℃ to above 10℃, and ends when the parity mean temperature is above 22℃ (the beginning of summer).
            </div>
            <div class="item">Summer is the season when everything flourishes and crops enter their peak growth season. The temperature rises, the weather is hot, strong winds and rainstorms are frequent, and all things grow vigorously. Summer is the stormiest season, often accompanied by strong winds and heavy rains. In the summer in the Northern Hemisphere, the continent is heated and the air pressure rises to form low pressure, while the ocean's constant temperature is relatively low to form high pressure. According to the circulation, the wind blows from the southeast in the summer. During summer, daylight hours are the longest throughout the Northern Hemisphere. Beginning and end of summer: Divided according to changes in astronomical phenomena: "Lixia" (the Big Dipper points to the southeast, the sun reaches 45° of the ecliptic longitude) is the starting point of summer and it ends at "Liqiu". Based on temperature changes: summer begins when the average temperature of the season rises steadily above 22℃ and ends when the average temperature of the season falls below 22℃.
            </div>
            <div class="item">Autumn is the harvest season, which means that all things begin to move from lush growth to withered maturity. The first two solar terms of autumn, Beginning of Autumn and End of Heat, are still extremely hot because the heat brought by the sun has not diminished. The so-called "heat is in the three dog days". The three dog days occur between Lesser Heat and End of Heat, with the highest temperature, humidity and heat in the year. The reason for the high humidity during the dog days is that the southeast wind blows during the dog days, and the southeast is the Pacific Ocean and the Indian Ocean, the air is humid, and the wet wind causes the high humidity during the dog days; in late autumn, the opposite is true, with the northwest wind blowing, and the northwest is a dry inland, and the dry northwest wind causes a dry climate in late autumn. The climate characteristics of the first two solar terms in autumn are humid and sultry. The real coolness in autumn usually does not come until after the White Dew solar term, and from then on, it gradually becomes cooler and drier. As we enter late autumn, the climate turns from hot to cool, and all things gradually wither as the cold grows. This is the season of alternating heat and cold. The most obvious change in autumn is that the leaves of grass and trees change from lush green to yellow and begin to fall, while crops begin to mature.
                [1] Start and end of autumn: Autumn starts at the Beginning of Autumn (when the Big Dipper points to the southwest and the sun reaches 135° of the ecliptic longitude) and ends at the Beginning of Winter. Based on temperature changes: autumn begins when the average temperature of the season drops steadily from above 22℃ to below 22℃, and ends when the average temperature of the season drops below 10℃.
            </div>
            <div class="item">In winter, yin and yang transform, all things go from being stored to being hidden, and plants retain their vitality. The beginning of winter means that the dry and rainy autumn climate is gradually passing, turning into the rainy, cold and freezing winter climate. The sun is lower in the Northern Hemisphere and the daylight hours are shorter. As the saying goes "It's hot in the dog days and cold in the coldest days". The winter solstice is the "first nine days". It is not very cold before the winter solstice. After the winter solstice, strong cold air frequently moves south and crosses the Nanling Mountains. The temperature drops sharply and the weather becomes cold. Winter becomes really cold after the winter solstice. Start and end of winter: Based on astronomical changes: "Beginning of Winter" (the Big Dipper points to the northwest, the sun reaches 225° of the ecliptic longitude) is the starting point of winter and ends at the next "Beginning of Spring". Based on temperature changes: Winter begins when the average temperature of the season steadily drops below 10℃ and ends when the average temperature of the season is above 10℃.
            </div>
        </div>
    </div>

    <script>
        var list = document.querySelector('.box-th').querySelectorAll('li');
        var items = document.querySelector('.box-tb').querySelectorAll('.item');
        for (var i = 0; i < list.length; i++) {
            list[i].onclick = function() {
                // Navigation bar style switching, exclusive algorithm for (var i = 0; i < list.length; i++) {
                    list[i].className = '';
                }
                this.className = 'current';

                // The following shows content switching, exclusive algorithm var index = this.getAttribute('data-index');
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>

Page effect:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: