Doing something tab Page function , We often see the following patterns ：
That is, when an element is selected , The corresponding class will be added under this element , In order to show the difference between . Today I studied how to use JQuery To achieve this effect .
1. HTML Code
<a id="med_specialist_1" name="med-specialist" class="med-active"> Specialist Clinic 1</a>
<a id="med_specialist_2" name="med-specialist"> Specialist Clinic 2</a>
2. JS Code
//js Implementation of the selected elements to dynamically add classes Ideas ： Write the class you want to add , When you click on an element , First remove all , Then add this class to the current element
$(function(){
$('a[name=med-specialist]').on('click', function() {
$('.med-active').removeClass('med-active');
$(this).addClass('med-active');
})
});
summary ： First write the class you want to add css Code , And add this class to one of the elements , As the default selected element . Give these elements the same name, Used to select such elements . Write click events , When you click on such an element , Remove the style first , Then add a style to the currently selected element .
Another example , It is to use the style of check box to realize the function of radio selection . It can be used css Go straight to the painting , Turn a circle into a square , however css We should have a solid foundation . The following code uses js Realization .
//js Implementation of the check box style to achieve the effect of the radio box
$(function(){
var box = document.getElementsByName('med-reg-10-cb');
for(var i=0;i<box.length;i++) {
box[i].onclick=function(){
for(var i=0;i<box.length;i++){
box[i].checked = false;
}
this.checked = true;
}
}
});
Page html The code will not let go , Just write a few input,type by checkbox, hold name All written js Just get what you want from me . In the above example , Is to put name All written 'med-reg-10-cb'.
use JQuery Dynamically add / Delete more articles about class
- jquery Dynamically generated element adding event method
Dynamically generated elements if you want to add events , To write $(document).on("click", "#txtName", function() { alert(this.v ...
- jquery The solution for adding click events to dynamically generated elements
encounter jquery Cannot add click events for dynamically generated elements , Google it , The solution is as follows : (<li> The middle element is dynamically generated ), Now I want to work for <i> Add click event , Examples are as follows : <d ...
- To the first p Element to add a class
This is a heading This is a paragraph. This is another paragraph. To the first p Element to add a class 111 <html> &l ...
- jquery Add events to dynamically added elements in
// html Code <ul id="main"> </ul> // js Code $(function(){ // Dynamic addition html Code $("#ma ...
- Jquery Dynamic in td Add checkbox
Pictured : Want to be in this id by headId Of <td> in , use jquery Dynamic addition checkbox The code is as follows : data I use it. ajax Data from the background , There are several in it user class , I want to name all the people ...
- jquery Dynamically created elements , Solution to invalid binding event
There is a problem today , Dynamically created elements , Invalid binding event , as follows : js The code is as follows : var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- jquery Create page elements dynamically
jquery use $() Method to dynamically create a page element , for example : var $div=$("<div title=' Create page elements dynamically '> Welcome to create a new div</div>" ...
- be based on jQuery Dynamically create html Elements
Doing it web Front end development , It is often encountered that the number or type of data cannot be determined before running , here , Data display , With the help of dynamic creation html Elements to show . Common dynamic creation HTML The way of elements , There are the following , It's generally poor ...
- jQuery Dynamically create html Summary of common methods of elements
In the use of jQuery Conduct WEB It's very useful when programming . Share with you for your reference . The specific method is as follows : Generally speaking , You can create it dynamically in the following ways html Elements : 1. Use jQuery The syntax for creating elements 2. Store dynamic content in ...
Random recommendation
- CJCMS series --demo Code section
CJCMS I haven't written many articles before , But there's no code , Maybe the code is messy and bad , But I think there has to be a start , Continuous improvement . As a sharing programmer , I decided to share . The structure in the previous article is quite complete , And this time I give demo, no ...
- If Python There are a lot of line breaks in , You can choose to use """...""" Represent multiline content
give an example :>>> print("""... ... ... ... ... ... ... ... ''')... fdfd""&quo ...
- noip2013 The match line
Title Description There are two boxes of matches , Each box contains n A match , Every match has a height . Now line up the matches in each box , The height of the same line of matches is different from each other , The distance between two matches is defined as : ∑(ai-bi)^2 among ai Express ...
- Cocos2d-x Migration to WindowsPhone8 Transplant problem -libcurl Library migration issues
stay Cocos2d-x 3.x The latest version provides Windows Phone 8 Platform migration libcurl The header files and library files required by the library . But we need to Windows Phone 8 Platform successfully transplanted libcurl It's still not easy , ...
- Haskell note （ Four ） Function system
Function system Of course, functional programming can't do without functional system , At the beginning of the tutorial, there was one of the simplest functions , Function system runs through Haskell All ,Haskell There are several important properties of the function of . First, declare the parameters and return value types of the function And then there's a ...
- Chapter 2 Open Book——7
I gunned my deafening engine to life, ignoring the heads that turned inmy direction, and backed care ...
- Openresty Source code installation script
Openresty Chinese official website address http://openresty.org/cn/ #! /bin/bash function openrestyinstall() { cd /opt/openres ...
- 03_java Basics （ 5、 ... and ） Construction of project structure
1. chart 2.dao Code editing package com.day01.station.dao; /** * Created by Administrator on 2018/2/1. */ public ...
- OpenCV Medium SVM Parameter optimization
OpenCV Medium SVM Parameter optimization svm Parameter optimization opencv SVMSVR Parameter optimization CvSVMopencv CvSVM SVM( Support vector machine ) It's one of the most widely used machine learning algorithms .SVM Most commonly used ...
- Windows How to configure tomcat environment variable
Apache Tomcat Is a Java Servlet and JavaServer Pages Open source software implementation of Technology , It can be used as a test Servlet Independent server , And it can be integrated into Apache Web ...