Heim  >  Artikel  >  Web-Frontend  >  请教如何实现以下效果?_html/css_WEB-ITnose

请教如何实现以下效果?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:04:241087Durchsuche





请教如何实现以上效果,选中“男孩”,“男孩”按钮变蓝色,”女孩“按钮变灰色;选中”女孩“,“男孩”按钮变灰色,”女孩“按钮变蓝色。


回复讨论(解决方案)

你用调试工具抓抓html标签,看看这个样式是什么东西,如果是个css类的话,点击时切换下class就行了,修改className属性可控制css
如果是写在style里面的背景色什么的,点击事件中改改style.backgroundColor

如果是移动端的开发,那么可以考虑jquery mobile 

查看表单元素在juqery mobile 下的展现形式

如果是移动端的开发,那么可以考虑jquery mobile 

查看表单元素在juqery mobile 下的展现形式



正是移动端的开发,首先感谢你提供的链接,很有用。但是很奇怪,我把代码复制过来后直接用,效果却不行,请教是不是还有什么设置啊?

你是否引入了一下文件
jquery.mobile-1.4.2.min.css
jquery.mobile-1.4.2.min.js

如果没有,你可以去下载,然后引入到页面即可

下载地址

为什么"性别:”和“男孩、女孩”按钮不在同一行?代码如下:
-------------------------------------------------------------------------------------------------------------------------------
 


      
  
  姓氏:
  
    
 
      
  
   名字:

  
    
 
      
  
 

  

    性别:
    
    
    
    
    

  
  
    

直接扔到浏览器,有什么问题

<!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>

加个颜色的样式

temp.html代码如下:
nbsp;html>




<script></script>
<script></script>




  

    

      
      
  
  
      
  
  

    
    
    
    
    

  
      
    

  






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

nbsp;html>




<script></script>
<script></script>




  

    

      
      
  
  
      
  
  

    
    
    
    
    

  
      
    

  






-----------------------------------------------------------------------

正常情况下,在temp.html页面点提交应转到temp1.html页面,而temp1.html页面点提交应转到temp.html页面。

但是现在的情况是不管是在temp.html页面点提交还是在temp1.html页面点提交,都是“该页无法显示”,请教原因?
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn