html点击按钮出现文件,从按钮其他HTML文件显示DIV点击

Hello World!

This example demonstrates the getElementById method!

Hello World again!

This example demonstrates the getElementById method!

Change div

function func() {

x = document.getElementById("div1");

x.style.display = "none";

x1 = document.getElementById("div2");

x1.style.display = "block";

}

它基本上显示按钮点击DIV2。

当div2和div1位于同一文件中时,此功能正常工作。我希望div2位于不同的文件中,当我们点击按钮而不更改网址时,将显示div2。

实现此目的的一种方法是使用iframe并更改按钮单击时iframe的url(其中div2在那里)。

有没有其他办法可以达到这个目的?

我对html和javascript很新,所以解释说明会有所帮助。谢谢!

2013-06-18

nav_jan

+0

使用PHP! https://de.wikipedia.org/wiki/PHP –

+0

你可以使用jQuery加载 http://api.jquery.com/load/ –

+0

@algorhythm它可以只使用PHP而不使用jQuery或AJAX,作为其他如果是的话,建议比关于如何实现这一点的小代码更有帮助。我知道一些基本的PHP,但我完全不了解AJAX和jQuery。如果这只能通过使用PHP来完成,那么我会采取这种方法。谢谢! –

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用以下的 HTML 代码来实现一个按钮,当用户点击按钮时,会弹出一个模态框(Modal)播放视频文件: ```html <!DOCTYPE html> <html> <head> <title>播放视频文件</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 播放视频 </button> <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">视频文件</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <video width="100%" controls> <source src="path/to/video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </body> </html> ``` 解释一下上面的代码: - 代码中用到了 jQuery 和 Bootstrap 的 CSS 和 JS 文件,需要在 `<head>` 标签中引入。 - 通过 `data-toggle="modal"` 和 `data-target="#myModal"` 属性,可以使按钮与模态框关联起来。当用户点击按钮时,会弹出 `id` 为 `myModal` 的模态框。 - 模态框中包含一个 `<video>` 标签,其中的 `src` 属性指定了视频文件的路径,需要根据实际情况修改。如果用户的浏览器不支持 HTML5 的 `<video>` 标签,会显示 `Your browser does not support the video tag.` 的提示信息。 你可以将上面的代码保存为一个 HTML 文件,然后在浏览器中打开该文件,就可以看到一个按钮和一个模态框。当用户点击按钮时,会弹出模态框并播放视频文件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值