`
高光01
  • 浏览: 525 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

联动效果点击0显示1,2,3点击1显示4,5,6,点击2显示7,8,9

 
阅读更多
点击0显示1,2,3点击1显示4,5,6,点击2显示7,8,9


<script>

function show(val){

if(val=='1'){
document.getElementById("div"+val).style.display="";
document.getElementById("div2").style.display="none";
document.getElementById("div3").style.display="none";
}
if(val=='2'){
document.getElementById("div"+val).style.display="";
document.getElementById("div1").style.display="none";
document.getElementById("div3").style.display="none";
}
if(val=='3'){
document.getElementById("div"+val).style.display="";
document.getElementById("div2").style.display="none";
document.getElementById("div1").style.display="none";
}
}

function hiddenFun(){
document.getElementById("div").style.display="none";

}
</script>

<input name="name" type="button" onClick="show('1');" value="0">
<input name="name" type="button" onClick="show('2');" value="1">
<input name="name" type="button" onClick="show('3');" value="2">
<div id="div1" style="display: none">
<input type="checkbox" name="" value="">1
<input type="checkbox" name="" value="">2
<input type="checkbox" name="" value="">3
</div>

<div id="div2" style="display: none">
<input type="checkbox" name="" value="">4
<input type="checkbox" name="" value="">5
<input type="checkbox" name="" value="">6
</div>

<div id="div3" style="display: none">
<input type="checkbox" name="" value="">7
<input type="checkbox" name="" value="">8
<input type="checkbox" name="" value="">9
</div>
分享到:
评论

相关推荐

    HorizontalScrollView和ViewPager联动效果

    HorizontalScrollView和ViewPager联动效果,实现点击顶部标签下面内容切换

    源码:el-table和Echarts折线图【表-图两者联动】显示tooltip效果【表-图-表三者联动】展示数据

    【Vue入门实践4】el-table和Echarts折线图【表-图两者联动】显示tooltip效果【表-图-表三者联动】展示数据 资源相关文章https://mp.csdn.net/mp_blog/creation/editor/123230346

    Axure rp 8_0视频教程菜鸟到高手.zip

    Axure rp设置页面的背景颜色-萝卜队长-国语高清.FLV [1_5]用Axure制作首页轮播图(上)...【3_7】Axure设置选项联动效果,萝卜队长Axure8_0从入门到精通-国语流畅.FLV 【4_1】创建自己的元件库-萝卜队长-国语高清.FLV

    HTML5手机端三级联动城市选择代码

    移动端省市区三级联动,非select,固定底部,滑动选择省市区,在手机上效果就是点击区域,底部出现省市区选择,并排显示,滑动选择

    uniapp uView u-picker组件三级联动Demo

    - 1、分2个入口:一个添加,一个编辑(编辑涉及到数据回显) - 2、添加的时候,展示的数据是默认的,是上一列第一行数据的详情(所有的年级(第一列),一年级...- 7、选择数据之后把数据赋值给`input`框显示 并关闭框

    DropDownList 联动效果

    实现了DropDownList的联动效果,选择省,则显示相应的市在另外一个DropDownList,省和市分别从数据库中读取,支持局部刷新。 附件内附全国最全的省、市数据库信息,包括创建省数据表的语句和市数据表的语句,及插入...

    jquery移动端省市区三级联动,非select,固定底部,滑动选择省市区

    移动端省市区三级联动,非select,固定底部,滑动选择省市区,在手机上效果就是点击区域,底部出现省市区选择,并排显示,滑动选择

    H3BPM 试用系统操作手册

    2.2.3 显示所有的数据项 9 2.3 办公流程 10 2.3.1 请假流程 10 2.3.2 会议通知 & 通知办理 12 2.4 流程功能 15 2.4.1 流程演示 15 2.4.2 竣工报告审批 17 2.4.3 多人活动 20 2.4.4 出差报销(父子流程) 22 2.4.5 ...

    jQuery+jsp实现省市县三级联动效果(附源码)

    本文实例讲述了jQuery+jsp实现省市县三级联动效果的方法。分享给大家供大家参考,具体如下: 在这里,用MySQL数据库存储了全国所有的省市县地区信息(点击此处下载源代码) 使用过的jar包 google的Gson.jar mysql-...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...

    iSee视频监控 v5.2

    支持单画面、4画面、9画面、16画面、20画面、25画面显示,可全屏显示,支持自动 翻页; 多画面实时显示/录像/回放功能,支持多协议云镜控制,支持多种报警盒实现联动报警; 手动录像、连续录像、定时录像、动态...

    txt文件上传ant design vue表格以及对表格文件的分列,预览行数等联动效果

    实现点击上传txt文件,将txt文件上传至ant design vue组件库的table表格上进行显示 第一个表格:用于展示文件以及对文件的显示操作 第二个表格:用于接收第一个表格的列数据

    Android Fragment实现列表和内容联动

    思路:在MainActivity定义一个回调接口,并在列表点击回调该接口,然后在内容区的Fragment设置回调,同时改变Fragment的显示内容。具体代码如下: 主布局: &lt;LinearLayout xmlns:android=...

    仿京东商城点击选择的省份地区三级菜单联动代码

    摘要:脚本资源,jQuery,三级联动,皇冠系统代理 jquery仿京东商城三级联动...如图所示的效果,选择省份后会显示二级菜单,再次点选会出现三级菜单,直到选择了目标后会自动将值赋给文本框。 运行环境:HTML/PHP/ASP/

    基于MVC3方式实现下拉列表联动(JQuery)

    要达到的效果是,点击一个下拉框,则另一个下拉框的值发生对应变化。如:选择中国,则另个一下拉框里显示中国各个省份。 传统的HTML方式比较简单,实际上基于MVC的实现方式也大同小异。 直接上代码: 代码如下: ...

    欣荣泉安防视频监控软件-单机版

    (2)自适应分辨率,满足不同屏幕的显示效果。 (3)增加和减少视频时所有窗口自动排序,区别传统的窗口选择。 (4)抓图后当时显示,游览历史抓图或视频时非常简易 很多软件都标注该公司产品拥有以上多级联网多设备兼容...

    类似微信实现的选人控件.zip

    2.计算水平listView里面最多显示的item的个数,针对不同的屏幕,item显示的个数应该明显不同的。   实现功能: 1.两个list联动 2.水平listView点击item自动取消 3.水平listView自动滑动到最右边   

    jQuery 联动日历实现代码

    来看下效果图 一、先来说下功能: 1.点击“确定”显示日历 2。再次点击隐藏,或从DOM中删除这个日历。如些反复第一,和第二这两步。 3.让日历中显示当前月份日期(多少天,每天是多少号)。 4.让当前月份的日期和星期...

    Android-PickerView

    精仿iOS的PickerView控件,有时间选择和选项选择并支持一二三级联动效果 ——TimePickerView 时间选择器,支持年月日时分,年月日,年月,时分等格式 ——OptionsPickerView 选项选择器,支持一,二,三级选项选择,...

    ExtAspNet_v2.3.2_dll

    -Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...

Global site tag (gtag.js) - Google Analytics