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
Detailed explanation of the error problem when setting the default value of 0000-00-00 in the date and datetime types of Mysql database
Phenomenon: After MySQL version 5.7, the default ...
Native js realizes the drag and drop of the nine-square grid
Use native JS to write a nine-square grid to achi...
Windows10 mysql 8.0.12 non-installation version configuration startup method
This article shares the specific steps for config...
How to query duplicate data in mysql table
INSERT INTO hk_test(username, passwd) VALUES (...
Summary of common problems and solutions in Vue (recommended)
There are some issues that are not limited to Vue...
MySQL DATE_ADD and ADDDATE functions add a specified time interval to a date
MySQL DATE_ADD(date,INTERVAL expr type) and ADDDA...
MySQL learning notes: data engine
View the engines supported by the current databas...
Detailed explanation of CSS BEM writing standards
BEM is a component-based approach to web developm...
js and jquery to achieve tab status bar switching effect
Today we will make a simple case, using js and jq...
Web page layout should consider IE6 compatibility issues
The figure below shows the browser viewing rate i...
18 common commands in MySQL command line
In daily website maintenance and management, a lo...
How to set the text in the select drop-down menu to scroll left and right
I want to use the marquee tag to set the font scro...
VMware installation of Ubuntu 20.04 operating system tutorial diagram
Memo: Just experience it. Record: NO.209 This exa...
Detailed explanation of the Svelte implementation principle for simple and easy JavaScript development
Table of contents Demo1 create_fragment SvelteCom...
Detailed explanation of the master-slave configuration tutorial of redis under Docker
1. Pull the redis image docker pull redis 2. Star...