`
huazx123
  • 浏览: 24388 次
文章分类
社区版块
存档分类
最新评论

radio 隐藏 显示层

 
阅读更多

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

<body>

 

 

 

<td align="left"><input name="radiobutton" type="radio" value="1" checked="checked" onclick="showDiv('1')" />
                剑特</td>
            </tr>
            <tr>
              <td align="left"><input type="radio" name="radiobutton" value="2"  onclick="showDiv('2')"/>
                豪杰</td>
            </tr>
            <tr>
              <td align="left"><input type="radio" name="radiobutton" value="3" onclick="showDiv('3')" />
                阴阳术</td>
            </tr>
            <tr>
              <td align="left"><input type="radio" name="radiobutton" value="4" onclick="showDiv('4')" />
                仙术士</td>
            </tr>

 

 

<div id="pic4" style="display:none"><img src="/jszy_07.jpg" width="616" height="200" />4</div>
<div id="pic3" style="display:none"><img src="/jszy_05.jpg" width="617" height="201" />3</div>
<div id="pic2" style="display:none"><img src="/jszy_03.jpg" width="617" height="188" />2</div>
<div id="pic1"><img src="/jszy_01.jpg" width="617" height="214" />1</div>

<script type="text/javascript">
function showDiv(id)
{


  for(var i=1;i<=4;i++)
  {
      if(i==id)
   {
       document.getElementById("pic"+id).style.display="block";
   }
   else
   {
    
       document.getElementById("pic"+i).style.display='none';
   }
  }
}

 
</script>

</body>
</html>

分享到:
评论

相关推荐

    js实现div层的显示与隐藏

    使用js代码实现div层的显示与隐藏,主要是radio的属性。

    从HAL到应用层 重写 HELLO

    HAL是操作系统与硬件设备之间的一层接口,它的主要目的是隐藏底层硬件的具体细节,为上层软件提供一致性的访问方式。通过HAL,开发者无需关心硬件的具体实现,只需调用统一的API就能控制硬件设备。在嵌入式系统或...

    基于JS实现EOS隐藏错误提示层代码

    - `f_check_radio`函数遍历同一name的Radio组,如果找到已选中的项,就隐藏其对应的错误提示层,然后返回true表示验证成功。如果没有选中项,调用`f_alert`函数显示错误提示,并返回false。 - `f_check_checkbox`...

    JQuery触发radio或checkbox的change事件

    早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层。 初始代码如下: 代码如下: $(function(){ $(“#ischange”).change(function() { alert&#40;“checked”&#41;; }); }); 捣腾了半天...

    鼠标点击展开关闭层效果.rar

    这种效果常用于网站的菜单、折叠面板、弹出窗口等元素,允许用户通过单击鼠标来显示或隐藏特定内容层,提升网页的交互性和用户体验。 在描述中,“鼠标点击展开关闭层效果”意味着当用户点击某个元素时,一个隐藏的...

    纯css3漂亮的checkbox和radio美化效果插件pretty.css.zip

    它通过使用`display:none`隐藏原始的输入元素,然后使用`::before`和`::after`伪元素来创建自定义的图形。这样,我们可以用CSS3的绘图方法(如`border-radius`创建圆角,`box-shadow`创建阴影,甚至`linear-gradient...

    div弹出层实现单选功能

    为了实现弹出层的显示和隐藏,我们可以使用JavaScript或jQuery。例如,给一个按钮添加点击事件,点击时弹出层显示,再次点击则隐藏。可以使用`show()`和`hide()`方法来控制`div`的可见性。 ```javascript var popup...

    CSS定义Radio单选项和Checkbox复选框样式有效代码

    首先,隐藏实际的Radio和Checkbox输入元素,设置它们的`visibility`、`width`、`height`为0,并移除边距和填充,这样它们就不会在页面上显示出来。然后,通过`+`选择器,CSS选择与隐藏输入元素相邻的`&lt;label&gt;`标签,...

    PHP+jQuery二级分类单选和多选弹出层

    在这个项目中,jQuery被用来实现前端的交互效果,比如弹出层的显示和隐藏。使用jQuery,可以轻松地监听用户的点击事件,当用户点击某个按钮时,触发弹出层的显示。此外,jQuery还能帮助我们动态加载和更新HTML内容,...

    仿携程主页菜单栏滚动置顶&条件筛选之多个单选弹出

    其次,条件筛选功能涉及动态显示和隐藏内容。在JavaScript或jQuery中,可以监听点击事件,当用户点击某个按钮或链接时,弹出相应的选项卡。同时,为了呈现半透明灰色背景,可以添加一个全屏遮罩层,并根据需要调整其...

    jquery zTree 树状导航

    * 【修正 v2.6 beta】对于zTree大容器进行图层隐藏、显示切换时,IE浏览器下出现 未知的运行时错误。(Line:547) 已解决,利用 setTimeout 避免了与其他控件产生冲突 * 【修正 v2.6 beta】zTreeNodeCache 在反复 ...

    一句话调用动态生成标签个数的标签栏,并可以设置 标签居左或是居中或是居右显示,支持单选或者多选

    例如,使用Vue.js的`v-for`指令和`v-model`可以轻松地实现数据驱动的动态标签,同时配合`v-if`或`v-show`来控制标签的显示与隐藏。 最后,压缩包中的"Test"文件可能是源代码示例或测试资源,用于验证和演示上述功能...

    GridView使用集合

    3、隐藏控件,当选择处理状态选中备注时,隐藏textbox显示 4、radio控件,选中获取GridView表主键 5、GridView中DropDownList绑定数据,直接绑定显示,无需点击编辑按纽。 6、JavaScript操作checbox实现全选,多选 ...

    使用css实现tab栏的切换

    在本例中,我们将使用`&lt;label&gt;`元素和隐藏的`&lt;input type="radio"&gt;`来实现这一功能。这是因为`&lt;label&gt;`元素可以通过点击与它相关的元素(如`&lt;input&gt;`)来触发事件,而`&lt;input type="radio"&gt;`则可以用来记录当前选中...

    jQuery单选多选按钮美化

    /* 选中时显示勾选图标 */ } ``` ```javascript $(document).ready(function() { $('.radio-btn, .checkbox-btn').click(function() { $(this).siblings('label').toggleClass('selected'); // 自定义选中状态的...

    不能查看隐藏文件的解决办法

    - 如果键值为默认的`0x02`,则表示只显示系统文件夹而不显示其他隐藏文件。 #### 注意事项 1. **备份数据**:修改注册表之前,请确保已备份重要数据,以防意外情况发生。 2. **谨慎操作**:注册表是系统的核心...

    js遍历添加栏目类添加css 再点击其它删除css【推荐】

    通过本文的解释,我们可以了解到如何使用JavaScript和jQuery库来操作DOM元素的类和CSS样式,并且能够实现较为复杂的交互效果,如点击切换高亮显示、内容层显示与隐藏等。这些操作在构建动态的网页界面时非常实用,...

    jQuery实现点击弹出背景变暗遮罩效果实例代码

    通过绑定事件监听器,我们可以控制遮罩层的显示和隐藏,而 CSS 则负责定义遮罩层的外观和位置。这种效果在网页应用中非常常见,可以增强用户的交互体验,使得信息的展示更加直观和便捷。在实际开发中,你可以根据...

Global site tag (gtag.js) - Google Analytics