js realizes the function of clicking to switch cards
|
This article example shares the specific code of js to realize the function of clicking to switch cards for your reference. The specific content is as follows In actual applications, clicking or moving on an element to pop up a drop-down menu or page is a common operation in web design. Next, we implement a menu switching by clicking on the menu, and use js to provide three ways to implement this function.
1. Use HTML to design the basic structure
<body>
<h2>Multi-Tab click switch</h2>
<ul id="tab">
<li id="tab1" value="1">10 yuan set meal</li>
<li id="tab2" value="2">30 yuan set meal</li>
<li id="tab3" value="3">50 yuan per month</li>
</ul>
<div id="container">
<div id="content1">
10 yuan package details: <br/> 100 minutes of calls within the monthly package, 0.2 yuan/minute for the excess</div>
<div id="content2" style="display: none">
30 yuan package details: <br/> 300 minutes of calls within the monthly package, 1.5 yuan/minute for the excess</div>
<div id="content3" style="display: none">
50 yuan monthly package details: <br/> Unlimited calls per month</div>
</div>
</body>2. Use CSS to design basic styles
<style>
* {
margin: 0;
padding: 0;
}
#tab li {
float: left;
list-style: none;
width: 80px;
height: 40px;
line-height: 40px;
cursor: pointer;
text-align: center;
}
#container {
position: relative;
}
#content1, #content2, #content3 {
width: 300px;
height: 100px;
padding: 30px;
position: absolute;
top: 40px;
left: 0;
}
#tab1, #content1 {
background-color: #ffcc00;
}
#tab2, #content2 {
background-color: #ff00cc;
}
#tab3, #content3 {
background-color: #00ccff;
}
</style>3.js implements click switching function
//Native js
var container = document.querySelectorAll('#container>div')
var event_li = document.querySelectorAll('#tab>li')
var currentindex=0
for(var i=0;i<event_li.length;i++){
event_li[i].num=i
event_li[i].onclick=function(){
container[currentindex].style.display='none'
var index_other = this.num
container[index_other].style.display='block'
currentindex=index_other
}}
//jQuery implementation, click on the parent element, all child elements are display_none, and then set the child elements of the element with the click event to display_block
var $container = $('#container>div')
$('#tab>li').click(function(){
$container.css('display', 'none')
var index = $(this).index()
var index_other = $(this).val()-1
$container[index_other].style.display = 'block'
})
//jQuery implementation, click on the parent element, the child element of the first element is display_none, and then the child element of the element with the click event is set to display_block
currentindex=0
$('#tab>li').click(function(){
$($container[currentindex]).css('display', 'none')
var index = $(this).index()
$container[index].style.display = 'block'
currentindex=index
})4. Summary (1) Native js can realize the click-to-switch function, but it is easier to use jQuery. The syntax is simple, but the function is powerful. (2) When comparing methods 2 and 3, we can see that method 2 sets the display mode of all child elements to none after triggering the click event. Obviously, when there are many child elements, the number of modifications required will increase accordingly, which will inevitably affect the loading performance. Therefore, it should be optimized to method 3. 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:
|
<<: Common usage of regular expressions in Mysql
>>: Specific use of pthread_create in linux to create threads
Recommend
Do designers need to learn to code?
Often, after a web design is completed, the desig...
Detailed explanation of Linux host name modification command
Linux change hostname command 1. If you only need...
Node.js adds, deletes, modifies and checks the actual combat record of MySQL database
Table of contents Three steps to operate the data...
How to make your JavaScript functions more elegant
Table of contents Object parameters using destruc...
Front-end advanced teaching you to use javascript storage function
Table of contents Preface Background Implementati...
A detailed introduction to the basics of Linux scripting
Table of contents 1. Script vim environment 2. Ho...
A brief description of the relationship between k8s and Docker
Recently, the project uses kubernetes (hereinafte...
Detailed explanation of how to install PHP curl extension under Linux
This article describes how to install the PHP cur...
Detailed explanation of the difference between Mysql temporary table and partition table
Temporary tables and memory tables A memory table...
Some points on using standard HTML codes in web page creation
<br />The most common mistake made by many w...
Nginx configuration 80 port access 8080 and project name address method analysis
Tomcat accesses the project, usually ip + port + ...
CentOS uses local yum source to build LAMP environment graphic tutorial
This article describes how to use the local yum s...
How to solve the problem of MySQL query character set mismatch
Find the problem I recently encountered a problem...
Solution to the same IP after cloning Ubuntu 18 virtual machine
Preface I recently used a virtual machine to inst...
Tutorial on deploying multiple servers with WebApi and configuring Nginx load balancing
01PARTCoreWebApi tutorial local demonstration env...