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
HTML+CSS+JavaScript to achieve list loop scrolling example code
Description: Set a timer to replace the content of...
Detailed explanation of the problem of matching even when there is a space at the end of the string in the Mysql query condition
1. Table structure TABLE person id name 1 you 2 Y...
Several ways to implement 0ms delay timer in js
Table of contents queueMicrotask async/await Mess...
MySQL 8.0 Window Function Introduction and Summary
Preface Before MySQL 8.0, it was quite painful to...
Detailed tutorial on setting password for MySQL free installation version
Method 1: Use the SET PASSWORD command MySQL -u r...
How to view available network interfaces in Linux
Preface The most common task after we install a L...
Detailed explanation of nginx optimization in high concurrency scenarios
In daily operation and maintenance work, nginx se...
VMware installation of Centos8 system tutorial diagram (command line mode)
Table of contents 1. Software and system image 2....
Get a list of your top 10 most frequently used terminal commands in Linux
I think the commands I use most often are: Choice...
What is HTML?
History of HTML development: HTML means Hypertext...
Use Vue3 for data binding and display list data
Table of contents 1. Comparison with Vue2 1. New ...
Detailed explanation of MySQL string concatenation function GROUP_CONCAT
In the previous article, I wrote a cross-table up...
Linux Network System Introduction
Table of contents Network Information Modify the ...
Example code for implementing hollowing effect with CSS
Effect principle Mainly use CSS gradient to achie...