如何在一个页面内点击一个按钮，然后在下方显示内容？

最新推荐文章于 2024-05-07 14:58:04 发布
最新推荐文章于 2024-05-07 14:58:04 发布
阅读量3.5k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhujiu7386/article/details/53983965
版权
就相当于把页面一分为二，上半边是按钮，下半边是文本显示区，怎么做到呢？
我只会用form_action，点击按钮后在新窗口内打开内容

而且要上半边的很多个按钮按下以后下半边会显示不同的内容~~

谢谢！
zhujiu7386
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android中如何触发html页面的Button控件点击事件
android丿Studio`
08-13 9508
   在android开发中，往往有时会加载html界面，同时需要与之html里面的控件进行交互。这里简单介绍一下如何在android中触发加载的html界面的Button控件。  1. 首先看Activity的代码： 首先我们要获取到当前的WebView控件，然后通过html的路径加载html界面，当前的html路径我是在本地的，然后设置 WebSettings webSettings...
Javascript: 当点击submit提交按钮时将文本框中的信息添加到下面得表单中
wang_gmail的专栏
06-09 6492
Insert title here window.onload = function(){ document.getElementById("addEmpButton").onclick = function(){ var nameVal = document.getElementById("name").value; var emailVal = docum
vue实现点击选中以下内容按钮选中按钮位置以下的所有数据项
最新发布
Honiler的博客
05-07 299
该需求的由来，是公司的产品为了实现如飞书这款应用中，IM聊天界面多选消息时一个快捷选择消息的操作功能。pointer-events 是否为 none ，即可得知是通过选择按钮触发，还是直接点击数据项触发。使鼠标点击释放后事件穿透到按钮下方的元素，以此取得该元素信息；由此，当数据项触发 mouseup 事件时可通过判断触发时。1. 使选择按钮悬浮在列表试图上方；2. 在鼠标按下按钮时在其样式添加。3. 触发后再将按钮恢复到。
在当前窗口中点击某个按钮，当前版面呈现出我们所需的内容（点击按钮，这个页面最底下的表格跑到这个页面最上面）
weixin_49826079的博客
03-17 217
在当前窗口中点击某个按钮，当前版面呈现出我们所需的内容（点击按钮，这个页面最底下的表格跑到这个页面最上面）
前端实现：用户输入内容，点击按钮，在另一个页面预览显示效果
遥感地学小站的博客
09-05 916
当用户输入内容并点击预览按钮时，它将文本内容存储在localStorage中，并打开一个新的窗口或标签页（在新页面中显示预览）。在这个示例中，我们创建了一个新的HTML页面（preview.html），用于显示预览内容。要在前端实现用户输入内容，然后点击按钮，在另一个页面预览显示效果，你可以使用HTML、CSS和JavaScript来完成这个任务。当用户在输入页面输入内容并点击预览按钮时，它会打开一个新的页面（preview.html），在那里用户可以看到输入的内容的预览效果。
点击按钮显示网页
沫栀·的博客
05-16 915
开发工具与关键技术： MVC 作者：郑健鹏 撰写时间：2019年5月16日 这次的网页实现的效果是点击上方的网页名称，当某一个选项被选择时在下方的文本框内显示当前选项所对应的网址和介绍，文本框下方还有一个跳转按钮，当点击跳转按钮后则会在当前网页跳转到文本框内所显示的页面，当没有选择时点击跳转按钮会弹出提示框，提示没有选择网站，请重新选择。 这个页面所使用的js代码是判断选择的是哪一个网页以及是否...
layui当点击文本框时弹出选择框,显示选择内容的例子
10-16
在本文中，我们将深入探讨如何使用layui框架在文本框被点击时弹出一个选择框，以便用户能够选择并显示相关内容。layui是一个轻量级的前端UI框架，它提供了丰富的组件和便捷的API，使得开发更加高效。以下是实现这一...
ios-一个分页控制器，可按钮点击，可滑动页面选择.zip
07-11
在这个名为“ios-一个分页控制器，可按钮点击，可滑动页面选择.zip”的资源中，我们有一个实现分页功能的应用示例，名为“Page Demo”。这个应用不仅提供了点击按钮进行页面选择的功能，还具有滑动页面的效果，增加...
高级搜索按钮点击后下拉一个高级查询条件框
03-06
- 使用`position:absolute`或`position:fixed`来定位下拉框，使其在按钮下方展开，同时考虑页面滚动时的位置调整。 3. **JavaScript或jQuery事件处理**： - 为高级搜索按钮绑定点击事件，当用户点击按钮时触发...
点击按钮后，出现一个popup
05-22
在Android开发中，"点击按钮后，出现一个popup" 是一种常见的交互设计，它涉及到按钮事件监听和PopupWindow的使用。PopupWindow是Android系统提供的一个轻量级窗口，它可以显示在屏幕任意位置，并且可以自定义其内容...
Ajax搜索结果页面下方的分页按钮的生成
09-05
最后，为所有按钮添加点击事件监听器，当用户点击按钮时，会触发一个Ajax请求，获取新的数据并更新页面。 在点击事件监听器中，`loadingimg()`函数通常用于显示加载动画，提供视觉反馈，让用户知道请求正在处理。`$...
html导航栏点击显示该栏内容,点击导航栏，实现下方内容改变
weixin_39567870的博客
06-07 5769
经常看到网页当中，上方一个导航栏，下面有内容，点击导航栏菜单，就可以改变下方的内容，今天查了查实现方法，本人用的frameset+frame实现的，实现方法简单，容易理解。废话不多说，上代码：Index.html1 2 3 index4 5 6 7 8 9 说明：rows表示你要把网页上下分栏，cols表示左右分栏，r...
html点击后按钮本身文字变化,javascript实现点击后变换按钮显示文字的方法
weixin_30647853的博客
06-20 3245
本文实例讲述了javascript实现点击后变换按钮显示文字的方法。分享给大家供大家参考。具体实现方法如下：显示一些按钮，如果点击了，当前点击的按钮文本变为“点了”，其他按钮文本变为“没点”//为所有按钮动态添加事件function IniButtonEvent() {var Items = document.getElementsByTagName("input");for (var i = 0...
web编程中的表单输入框效果
吴秋华的ＣＳＤＮ
06-20 1267
<br />最近我在网上看到挺多一些表单方面的问题和技巧，但是有些是不可能或很少会用到的，在这我总结了几个可能会用到的表单输入框特效，具体代码如下：<br /> <br />1、选中后方可编辑：<br /><input type="checkbox" name="tp1" value="1" onclick="if(this.checked){txtNo.disabled=false}else{txtNo.disabled=true}">我会好好学习<br />你的姓名：<input type="text"
html设置按钮显示字,如何把让button的提示文字显示出来？
weixin_28733637的博客
06-24 4520
要怎么做才能显示登录？这是CSS代码：body{margin: 0;padding: 0;font-family: "Microsoft YaHei","helvetica";}#All{margin: 0;padding: 0;}#Header{background-color:rgb(61,105,192);width: 1920px;height: 100px;margin: 0;paddi...
vue数据修改之后没有同步渲染出来，需要点一下屏幕才会进行页面更新（原因和解决方法）
weixin_44220680的博客
06-18 4072
这是一个很奇怪的问题，当时需要做一个状态判断，设置了一个布尔值 edit：false 如果是false则显示按钮A， 反之则显示按钮B， 但真正使用的时候出现了问题，当点击之后，edit数值变成了true，但是页面上的按钮没有进行同步更新，需要随意点击一下屏幕空白处才会进行更新 经过多方排查，发现原因： 因为再vue的data里面，一开始并不存在edit,这是通过后期方法进行的赋值。所以导致vue页面渲染的响应慢一拍。 发现问题之后解决就很简单了， 在对应的数据里面添加上edit参数就可以 ...
实现按钮点击，相同区域显示对应按钮下内容
weaknesss的博客
08-27 1588
<button onclick="show1()"> <a class="img"><img src="images/icon1.png"><span>门诊信息管理</span></a> </button> <button onclick="show2()"> <.
一个按钮点击隐藏下面内容，再点击显示，并且按钮自己里边的字也在变
qq_39703462的博客
08-26 1435
隐藏 快把我藏起来     //获取元素     var btn = document.getElementsByClassName('btn')[0];     var showDiv = document.getElementsByClassName('show')[0]; //添加点击事件          function out(){         bt
如何使用JSP实现一个页面中点击查询，在本页面下面显示结果
05-22
要使用JSP实现这个功能，你可以按照以下步骤进行： 1. 在页面上添加一个查询表单，用户输入查询条件。 2. 在JSP页面上处理表单提交，获取查询条件。 3. 使用Java代码执行查询操作并获取查询结果。 4. 将查询结果显示在页面下方的表格中。 以下是一个简单的示例代码： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>查询结果</title> </head> <body> <form method="post" action="${pageContext.request.contextPath}/query.jsp"> <label>查询条件：</label> <input type="text" name="keyword" /> <input type="submit" value="查询" /> </form> <%-- 处理查询结果 --%> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <% // 获取查询条件 String keyword = request.getParameter("keyword"); if(keyword == null) { keyword = ""; } // 执行查询操作 List<User> userList = UserDao.query(keyword); // 显示查询结果 for(User user : userList) { %> <tr> <td><%=user.getName()%></td> <td><%=user.getAge()%></td> <td><%=user.getGender()%></td> </tr> <% } %> </table> </body> </html> ``` 在这个示例代码中，我们首先使用一个表单让用户输入查询条件。表单的提交地址是query.jsp。 在query.jsp中，我们先获取表单中提交的查询条件，然后使用UserDao.query方法执行查询操作，并将查询结果显示在页面下方的表格中。 当用户点击查询按钮时，表单会提交到query.jsp页面，并执行上述操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值