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

  1. 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 ...

  2. 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 ...

  3. 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 ...

  4. jquery Add events to dynamically added elements in

    // html Code <ul id="main"> </ul> // js Code $(function(){ // Dynamic addition html Code $("#ma ...

  5. 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 ...

  6. 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'); // ...

  7. 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>" ...

  8. 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 ...

  9. 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

  1. 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 ...

  2. If Python There are a lot of line breaks in , You can choose to use &quot;&quot;&quot;...&quot;&quot;&quot; Represent multiline content

    give an example :>>> print("""... ... ... ... ... ... ... ... ''')... fdfd""&quo ...

  3. 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 ...

  4. 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 , ...

  5. 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 ...

  6. Chapter 2 Open Book——7

    I gunned my deafening engine to life, ignoring the heads that turned inmy direction, and backed care ...

  7. Openresty Source code installation script

    Openresty Chinese official website address  http://openresty.org/cn/ #! /bin/bash function openrestyinstall() { cd /opt/openres ...

  8. 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 ...

  9. 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 ...

  10. 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 ...