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