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. 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:
|
<<: Detailed tutorial on configuring nginx for https encrypted access
>>: Detailed tutorial on using the tomcat8-maven-plugin plugin in Maven
Recommend
Practice of using SuperMap in Vue
Table of contents Preface Related Materials Vue p...
How to start a transaction in MySQL
Preface This article mainly introduces how to sta...
Introduction and usage examples of ref and $refs in Vue
Preface In JavaScript, you need to use document.q...
jQuery realizes image highlighting
It is very common to highlight images on a page. ...
JavaScript to implement a simple shopping form
This article shares the specific code of JavaScri...
Will this SQL writing method really cause the index to fail?
Preface There are often some articles on the Inte...
JavaScript implements color identification when the mouse passes over the table row
This article shares with you how to use JavaScrip...
Vue+Router+Element to implement a simple navigation bar
This project shares the specific code of Vue+Rout...
Do you know how many connections a Linux server can handle?
Preface First, let's see how to identify a TC...
The reason why MySQL manually registers the binlog file and causes master-slave abnormalities
1. Source of the problem A friend @水米田 asked me a...
Using keras to judge SQL injection attacks (example explanation)
This article uses the deep learning framework ker...
Detailed explanation of 10 common HTTP status codes
The HTTP status code is a 3-digit code used to in...
How to use nginx to block a specified interface (URL)
1. Introduction Sometimes, after the web platform...
Example code of how to implement pivot table in MySQL/MariaDB
The previous article introduced several methods f...
Detailed explanation of CocosCreator optimization DrawCall
Table of contents Preface What is DrawCall How do...