Implementing simple tabs with js
|
Tab selection cards are used very frequently on real web pages. Basically, every web page needs to use one or more tab selection cards. We can use js to achieve a simple tab selection effect The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple card selection effect</title>
<style>
body,ul{
margin:0;
padding:0;
}
li{
list-style: none;
}
.nav ul{
display: flex;
}
.nav li{
width: 40%;
margin: 1rem;
text-align: center;
font-size: 1.3rem;
}
.selected{
background-color: yellow;
}
.content div{
display: none
}
/* Initially only the first block of content is displayed*/
.content div:nth-child(1){
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<!-- Initially make the first option selected -->
<li class="selected">Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
</ul>
</div>
<div class="content">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>
<script>
//Get all navigation options var li = document.querySelectorAll(".nav li");
//Get all divs of the content
var div = document.querySelectorAll(".content div")
for(var i=0;i<li.length;i++){
//The key is to establish a connection between li and div li[i].index=i;
li[i].onmouseover=function(){
// Clear all option styles and hide all contents for(var j=0;j<li.length;j++){
li[j].className="";
div[j].style.display="none"
}
//Set the style for the option on which the mouse is hovering, and its corresponding div will appear this.className="selected";
div[this.index].style.display="block";
}
}
</script>
</body>
</html> It should be noted that: this, this at this time is equivalent to li[i]. The correct effect diagram is:
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:
|
<<: How to solve the mysql insert garbled problem
>>: Detailed explanation of Linux zabbix agent deployment and configuration methods
Recommend
Tutorial on installing Microsoft TrueType fonts on Ubuntu-based distributions
If you open some Microsoft documents with LibreOf...
Installation tutorial of mysql 5.7 under CentOS 7
1. Download and install the official MySQL Yum Re...
Detailed explanation of various HTTP return status codes
When a request is sent to your server to display ...
Master-slave synchronization configuration of Mysql database
Table of contents Mysql master-slave synchronizat...
How to cancel the background color of the a tag when it is clicked in H5
1. Cancel the blue color of the a tag when it is ...
Explain MySQL's binlog log and how to use binlog log to recover data
As we all know, binlog logs are very important fo...
How to use Docker to build enterprise-level custom images
Preface Before leaving get off work, the author r...
Quickly solve the problems of incorrect format, slow import and data loss when importing data from MySQL
If you want to solve the slow problem once and fo...
Solution to incomplete text display in el-tree
Table of contents Method 1: The simplest way to s...
Introduction to the use and advantages and disadvantages of MySQL triggers
Table of contents Preface 1. Trigger Overview 2. ...
Summary of 6 Linux log viewing methods
As a backend programmer, you deal with Linux in m...
MyBatis dynamic SQL comprehensive explanation
Table of contents Preface Dynamic SQL 1. Take a l...
MySQL 5.6.15 installation and configuration method graphic tutorial under Windows 8
MySQL is a database that I like very much. Today,...
How to prevent Flash from covering HTML div elements
Today when I was writing a flash advertising code,...
Detailed explanation of Linux curl form login or submission and cookie usage
Preface This article mainly explains how to imple...