Please tell me how to achieve the following effects? _html/css

Please tell me how to achieve the following effects? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:04:24

Original

1100 people have browsed it

Please tell me how to achieve the above effect. Select "Boy", the "Boy" button turns blue, and the "Girl" button turns gray; select "Girl", "Boy" button turns gray and the "Girls" button turns blue.

Reply to the discussion (solution)

You use the debugging tool to capture the html tag and see what the style is. If it is a css class, Just switch the class when clicking. Modify the className attribute to control the css
If it is the background color written in the style, change the style.backgroundColor in the click event

If it is a mobile development, then You can consider jquery mobile

to view the form elements in juqery mobile

If it is mobile development, then you can consider jquery mobile

to view the form elements in The display form under juqery mobile

is exactly the development of mobile terminal. First of all, thank you for the link you provided, it is very useful. But it's strange. I copied the code and used it directly, but the effect is not working. Is there any other settings?

Have you introduced the file
jquery.mobile-1.4.2.min.css
jquery.mobile-1.4.2.min.js

If not, you You can download it and then import it to the page

Download address

Why are the "Gender:" and "Boy, Girl" buttons not in the same line? The code is as follows:
----------------------------------------------- -------------------------------------------------- ----------------------------------

Last name:

Name:

-BOTTOM: 8px">

Gender:

boy

girl

Throw it directly into the browser, what’s the problem

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.2/css/themes/default/jquery.mobile-1.4.2.min.css">    <script src="http://demos.jquerymobile.com/1.4.2/js/jquery.js"></script>    <script src="http://demos.jquerymobile.com/1.4.2/js/jquery.mobile-1.4.2.min.js"></script></head><body><fieldset data-role="controlgroup" data-type="horizontal">    <legend>Horizontal controlgroup, radio:</legend>    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked">    <label for="radio-choice-h-2a">男</label>    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off">    <label for="radio-choice-h-2b">女</label></fieldset></body></html>

Copy after login

Add a color style

temp.html代码如下：

-------------------------------------------------------------------------------
temp1.html代码如下：

姓氏

名字

男孩1

女孩1