JavaScript implements click toggle function

JavaScript implements click toggle function

This article example shares the specific code of JavaScript to implement the click-to-switch function 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/>&nbsp;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/>&nbsp; 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/>&nbsp;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:
  • js implements click to switch TAB tag instance
  • Simple pure js to achieve click switch TAB tag example
  • Vue.js click the toggle button to change the content of the example
  • Example of simple tab click switching function implemented by JS
  • Native JS realizes hiding and displaying pictures JS realizes clicking and switching pictures
  • jQuery plugin jquery.LightBox.js realizes the effect of clicking to enlarge the picture and switching between left and right clicks (with demo source code download)
  • A simple example of using js to switch the background image of a checkbox by clicking on it
  • Simple Tab click switching function example implemented by JavaScript
  • JavaScript implements Tab click switching example code
  • JS realizes the light blue simple vertical Tab click switching effect

<<:  How to add Tomcat Server configuration to Eclipse

>>:  Solution to the problem that MySQL service cannot be stopped or deleted under Windows

Recommend

Vue realizes the logistics timeline effect

This article example shares the specific code of ...

A brief discussion on the role of Vue3 defineComponent

Table of contents defineComponent overload functi...

Vue implements the frame rate playback of the carousel

This article example shares the specific code of ...

A link refresh page and js refresh page usage examples

1. How to use the link: Copy code The code is as f...

Vue commonly used high-order functions and comprehensive examples

1. Commonly used high-order functions of arrays S...

Implementation of Nginx configuration of local image server

Table of contents 1. Introduction to Nginx 2. Ima...

A brief analysis of CSS3 using text-overflow to solve text layout problems

Basic syntax The use of text-overflow requires th...

IIS 7.5 uses URL Rewrite module to achieve web page redirection

We all know that Apache can easily set rewrites f...

Detailed explanation of the difference and usage of quotes and backticks in MySQL

Preface So I wrote this blog. This blog also reco...

Nginx access log and error log parameter description

illustrate: There are two main types of nginx log...

How to start jar package and run it in the background in Linux

The Linux command to run the jar package is as fo...

How the Linux kernel breaks into the process address space and modifies the process memory

Isolation of process address spaces is a notable ...

How to solve the problem of not finding the password after decompressing the MySQL free installation version

1. Unzip mysql-8.0.21-winx64 2. Configure environ...

Tips to prevent others from saving as my web page and copying my site

Nowadays, copying websites is very common on the I...

Example code for implementing WeChat account splitting with Nodejs

The company's business scenario requires the ...