Html + JS : 点击对应的按钮,进行选择是隐藏还是显示(用户回复功能)
例如:
当我点击按钮1时,点击第一下进行显示This is comment 01,点击第二下隐藏This is comment 01
当我点击按钮2时,点击第一下进行显示This is comment 02,点击第二下隐藏This is comment 02
当我点击按钮3时,点击第一下进行显示This is comment 03,点击第二下隐藏This is comment 03
注意:不同的按钮点击也会显示不同的数据
使用场景:根据不同的留言信息,点击“回复”按钮,弹出对应的回复框
实例:
代码:
<a href="javascript:" onclick="show(0)">01</a>
<p class="content3" style="display: none"> This is comment 01</p> <a href="javascript:" onclick="show(1)">02</a>
<p class="content3" style="display: none"> This is comment 02</p> <a href="javascript:" onclick="show(2)">03</a>
<p class="content3" style="display: none"> This is comment 03</p> <script>
function show(num){
var content = document.getElementsByClassName('content3'); // getElementsByClassName得到的是数组形式
content = content[num]; // 得到数组的其中一成员,返回一个对象(p标签元素) // 如果对象中的diplay状态为none
if (content.style.display=="none") { // 将该对象的diplay属性修改为block进行显示
content.style.display="block";
} else{ // 否则修改为none进行隐藏
content.style.display="none";
} //console.log(content); }
</script>
效果:
(1)没有操作之前:
(2)只点击“按钮1”之后:
(2)只点击“按钮2”之后:
(3)点击“按钮1”和“按钮2”之后:
(4)点击“按钮1”两次,点击“按钮2”一次后:
疑问:按钮和内容是怎么关联起来的?
回答:
a标签 有 onclick 属性
里面有 show(0) 这个javascript代码
show(0) 就是运行 show() 这个 函数, 然後传入 0 为参数
到目前为止,<a> 和<p> 是没有关联的
和<p>的关联,全部在函数里面定义
例如13行就是 用classname获取所有相关的 <p>,然後14行,在多个<p>中选出了一个,即content = content[num]这一句,所以它们关联了
以上就是我的总结啦,为那位给我解答的朋友致敬致谢!
END
Html + JS : 点击对应的按钮,进行选择是隐藏还是显示(用户回复功能)的更多相关文章
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- Vue-cli中使用vConsole,以及设置JS连续点击控制vConsole按钮显隐功能实现
最近发现了一个鹅厂的仓库,实现起来比我这个方便[捂脸].https://github.com/AlloyTeam/AlloyLever 一.vue-cli脚手架中搭建的项目引入vConsole调试 1 ...
- js中点击空白区域时文本框与隐藏层的问题
当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. <!DOCTYPE html PUB ...
- jQuery点击按钮实现div的隐藏和显示切换效果
<script type="text/javascript"> $(function(){ $('#click_event').click(function(){ i ...
- 【MFC】 点击不同的按钮后在界面同一位置显示不同的对话框内容(转)
原文转自 http://bbs.csdn.net/topics/391039432 如图类似Tab控件的功能 但Tab控件按钮是固定的上下左右 不方便 所以想自己重新做个这种 我M ...
- 通过给事件处理程序传递this参数,获取事件源对象的引用。单机提交按钮时在信息框中显示用户输入的字符。
<script> function mymethod(str) { alert("您输入的是:"+str); } </script><form act ...
- 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- JS 点击复制按钮 将文字复制到手机剪贴板
我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有 ...
- html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码
一:通过html锚点实现滚动定位到页面指定位置(DIV): 如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...
随机推荐
- 2015苏州大学ACM-ICPC集训队选拔赛(1) 1008
猪猪过河 Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Submissi ...
- Photoshop在网页设计中的应用与方法
1.图像局部截取和图像尺寸调整 做网页设计时经常要用到的某张图像一部分,这就需要截取图像的局部.图像局部截取的方法很多,但使用Photoshop操作起来更方便.具体操作步骤如下: (1)在Photos ...
- mysql隔离级别与锁,接口并发响应速度的关系(1)
默认隔离级别:可重复读 原始数据 | id | name | addr | | nick | NULL | 事务1 事务2 start transaction start transaction ; ...
- .NET Core单元测试覆盖率统计coverlet配置和使用
https://segmentfault.com/a/1190000017569492 需要使用: 使用 Moq 测试.NET Core 应用 https://www.cnblogs.com/c ...
- Python3 PIL Image 操作文件后导致占用问题
需求:按图片分辨率范围分类图片(每个商品有N张图片在一个目录内). 实现:用PIL Image打开图片并读取宽度和高度.然后按不同分辨率存档到不同目录. 问题:从原有目录移动到目标目录时出现 “Per ...
- appium连接夜神模拟器方法总结
使用appium连接模拟器前提条件:appium环境已经搭建完毕,搭建步骤请参考我的博客:appium手机自动化环境搭建 1.下载并安装夜神模拟器:https://www.yeshen.com/ 2. ...
- 使用ServletContainerInitializer动态注册组件
1.背景 在web容器(例如tomcat)启动时为提供给第三方组件机会做一些初始化的工作,例如注册servlet或者filtes等.对此servlet规范提供了ServletContainerInit ...
- JAVA中 List和ArrayList的区别
List是一个接口,而ListArray是一个类. ListArray继承并实现了List. 所以List不能被构造,但可以向上面那样为List创建一个引用,而ListArray就可以被构造. ...
- chrome 修改请求头的小工具
chrome 网上应用店中搜索 ModHeader
- opencv 3.4.0 的编译
cmake ../ -DCMAKE_BUILD_TYPE=RELEASE -DCMAKE_INSTALL_PREFIX=/usr/local