点击按钮时,显示不同的div内容
<!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>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li ><a href="#" type="radio" name="sex" id="button1" onclick="show1()"> A</a></li>
<li><a href="#" type="radio" name="sex" id="button1" onclick="show2()" >B</a></li>
</ul>
<div style="display:none" id="div1">
<p>第一个DIV!</p>
</div>
<div style="display:none" id="div2">
<p> 第二个DIV!</p>
</div>
<script>
function show1(){
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";
};
function show2()
{
document.getElementById("div2").style.display="block";
document.getElementById("div1").style.display="none";
}
</script>
</body>
</html>
点击按钮时,显示不同的div内容的更多相关文章
- js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- 常见问题1:默认div隐藏,点击按钮时出现,再点击时隐藏。
例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...
- [C# 基础知识系列]专题五:当点击按钮时触发Click事件背后发生的事情 (转载)
当我们在点击窗口中的Button控件VS会帮我们自动生成一些代码,我们只需要在Click方法中写一些自己的代码就可以实现触发Click事件后我们Click方法中代码就会执行,然而我一直有一个疑问的—— ...
- chrome 获得点击按钮时的事件
初次了解浏览器高级点的功能,原来这么强 想了解点击一个网页的按钮时触发了什么事件,firefox chrome确实很强大,基本可以监控所有内容 以chrome为例: 在按钮上 右键检查 或者 F12 ...
- 去掉firefox点击按钮时的虚线边框
去掉火狐里面点击按钮时候的虚线边框 button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[t ...
- 问题8:手机端实现点击按钮时更换颜色(解决IOS不显示背景)
CSS: .sval:active, .sval:focus{ background: #999;color:#fff;opacity:50; } 在触屏上,:hover和:active也不是直接就起 ...
- MVC+Spring.NET+NHibernate .NET SSH框架整合 C# 委托异步 和 async /await 两种实现的异步 如何消除点击按钮时周围出现的白线? Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法
MVC+Spring.NET+NHibernate .NET SSH框架整合 在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MV ...
- 使用Ueditor点击上传图片时显示延迟的问题
最近在做一个项目,需要用到Ueditor,但是在点击上传图片的时候,总是隔了4-5秒才显示文件框 查了一些资料,最后发现,只需在 修改:(1) dialog/images/image.js 把imag ...
- 鼠标放上时显示隐藏的div或者其他代码的“jquery”的三种写法和“JavaScript”的一种写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- iOS之UIDatePicker
这个还要取决于手机系统设置
- React Native 之react-native-sqlite-storage
npm 官网指导: https://www.npmjs.com/package/react-native-sqlite-storage 1. 执行: npm install react-native- ...
- 使用distinct消除重复记录的同时又能选取多个字段值
需求是:我要消除name字段值重复的记录,同时又要得到id字段的值,其中id是自增字段. select distinct name from t1 能消除重复记录,但只能取一个字段,现在要同时取id, ...
- STM32内部硬核的认识
STM32内部含有硬核,对于一些协议(例如:UART,SPI,IIC,CRC等)我们只要调用硬核就可以了,同时我们也可以自己写通信协议. 这些硬核最终肯定是要有引脚输出的,这就是为什么STM32的引脚 ...
- mysql UNIQUE约束 语法
mysql UNIQUE约束 语法 作用:UNIQUE 约束唯一标识数据库表中的每条记录. 江苏大理石平台 说明:UNIQUE 和 PRIMARY KEY 约束均为列或列集合提供了唯一性的保证.PRI ...
- onmouseover和onmouseout鼠标移入移出切换图片的几种实现方法
鼠标移入移出图片切换很常见的,那我们就来说说他的写法 第一种方法,也是最简单的一种,在html:里就可实现 <img class="img" src="img/do ...
- 20180827-Java网络编程
Java 网络编程 网络编程是指编写运行在多个设备(计算机)的程序,这些设备都通过网络连接起来. java.net包中J2SE的API包含有类和接口,它们提供低层次的通信细节.你可以直接使用这些类和接 ...
- 我的"开发工具箱"
我使用的IDEA插件 Free Mybatis plugin Alibaba Java Coding Guidelines 我的IDEA开发配置 配置Maven Runner -DarchetypeC ...
- dojo 官方翻译 dojo/_base/array 版本1.10
官方地址:http://dojotoolkit.org/reference-guide/1.10/dojo/_base/array.html#dojo-base-array array模块dojo进行 ...
- kafka 配置权限
参考:https://www.cnblogs.com/huxi2b/p/10437844.html http://kafka.apache.org/documentation/#security_au ...