Home >Web Front-end >HTML Tutorial >Please tell me how to achieve the following effects? _html/css_WEB-ITnose
Please tell me how to achieve the following effects? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:04:241135browse
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:
----------------------------------------------- -------------------------------------------------- ----------------------------------
a34de1251f0d9fe1e645927f19a896e8
f82026512cf28152b4e24328cc7f9890
Last name: c5828bd8d164371118cf1aa65f546544
02316988d1129bf85d55319dd82c6742
2688fc03e5140d9bef12bef73424f836
a34de1251f0d9fe1e645927f19a896e8
77a5e778194186955bc76d860cf2ce60
Name: 4290121745427c3f20e13341f64a1a96
02316988d1129bf85d55319dd82c6742
fd273fcf5bcad3dfdad3c41bd81ad3e5
a34de1251f0d9fe1e645927f19a896e8
-BOTTOM: 8px">
89a8cd297972a9be8b19a9f17886f127
e911751791aa3ba95dc724e2fb905976Gender: a814477f903c8e27bd1ff8e5c6bbe7c1
7b57e9c188936e416aa58a837895eeab
160b027ed7f4f93b5efa43a03bd5719fboy8c1ecd4bb896b2264e0711597d40766c
a00cbda4bed06e32dc3311a4f89adc7a
cf5797745cae4fb6b5226701628ade6cgirl8c1ecd4bb896b2264e0711597d40766c
a3ae74428855f48d0438405a4619fe75
02316988d1129bf85d55319dd82c6742
fd273fcf5bcad3dfdad3c41bd81ad3e5
<!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>Add a color style
temp.html代码如下：
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
0f46fe4cb83d38d064bdfd1f73da0af5
38ad9798e4429b803d5b240fdcc33840
ea8a40fad805c81ad9755ab7cb00c4192cacc6d41bbb37262a98f745aa00fbf0
9cf3382829fd3cf5bca238e52cc7609f2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
d981cae2ff95090f63f09e2fa0f70ef9
345f2d7e7d0a444e5674f9ba1bd33e00
f1517db5270bd6280e9609d1cd477fdf
d84877a8682e9325765e4201adae8ac8姓氏8c1ecd4bb896b2264e0711597d40766c
60a6c3d40182e1c2ec6d82a00cbe889d
23a28f641fa9a0e7f1c0eab38e8d9e75名字8c1ecd4bb896b2264e0711597d40766c
ab0ba8421e8df49bfc4cc812fb0b8638
cfc4ae407bb53f6d9a4c9a071f962fce
7f9d69e45762220bca354314127a069c
b11a23d1ef64a0e3eea6e8b00546fe09男孩8c1ecd4bb896b2264e0711597d40766c
ad9e42b6ccacdbb8c12908ac4f6dc54c
1fcee1efa28da83b6b52545ecc4170c3女孩8c1ecd4bb896b2264e0711597d40766c
a3ae74428855f48d0438405a4619fe75
10c88813b1d79313d0132c5ec3999828
f5a47148e367a6035fd7a2faa965022e
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
-------------------------------------------------------------------------------
temp1.html代码如下：
e1f4ff64491df66c6185f6e73063b5a3
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
a6f4b57804bb1f2c1bb6c10c41da5e60
9228fcf2ffed1d7ab4951446b1f9637b
f72a1638b647ed064ef00c48d94717442cacc6d41bbb37262a98f745aa00fbf0
fb83437d4badd6f53031e827dcaacea32cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
a662cea05a4f3d6ed9cc923350362d30
a450d04c10d7354f6070e8f74017a75c
f2d440cab74e1366c26b4acf252fd49b
925f704ec548725d572fed8c809b4f3f姓氏8c1ecd4bb896b2264e0711597d40766c
470dfce9fa0873c56c03c61c5b985149
d3b3b9ab26f738600b5820100b03aa9e名字8c1ecd4bb896b2264e0711597d40766c
67b1204ca7ebf76e91e9de1abd5d3172
90e99798f99dd8885eccd8edc631ce87
3eb08c6bc136ab121e37ee4b79fbbc77
2c90f97ed20c5ccda3113e15e072135b男孩18c1ecd4bb896b2264e0711597d40766c
5304b9b26823f8c17b5852527f5cb17b
a3b38dc9eb928215f72c0ea8dfe95586女孩18c1ecd4bb896b2264e0711597d40766c
a3ae74428855f48d0438405a4619fe75
2870c3388e8eddb6c81c2abd14965645
f5a47148e367a6035fd7a2faa965022e
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
-----------------------------------------------------------------------
正常情况下，在temp.html页面点提交应转到temp1.html页面，而temp1.html页面点提交应转到temp.html页面。
但是现在的情况是不管是在temp.html页面点提交还是在temp1.html页面点提交，都是“该页无法显示”，请教原因？