请原谅我有一个非常基本的问题，因为我还在接受Jquery。 我试图加载另一个.html页面点击此.html页面中的任何数字元素，但脚本标记不能按预期工作任何人都可以帮助下面的js
html代码：
$(document).ready(function(){
$("figure").click(function(){
$(this).load("singlevideo.html");
});
});
* {
padding:0px;
margin:0px;
}
body {
margin:0;
padding:0;
height:100%;
}
header {
background: green;
color: white;
padding: 8px 0px 6px 40px;
height: 50px;
}
.navbar.navbar-inverse.navbar-fixed-top {
background-color: green; /* fallback color, place your own */
font-weight: 400;
color: white;
text-decoration: none;
}
header h1 {
display: inline;
font-family: 'Oswald',sans-serif;
font-weight: 400;
font-size: 32px;
float: left;
margin-top: 0px;
margin-right: 10px;
}
nav ul{
display: inline;
padding: 0px;
float: left;
}
nav ul li{
display: inline-block;
list-style-type:none;
color: white;
float: left;
margin-left: 15px;
}
nav ul li a{
color: white;
text-decoration: none;
}
#nav {
font-family: 'Montserrat', sans-serif;
position: fixed;
}
.homered{
background-color: red;
padding: 30px 10px 30px 10px;
}
.homeblack:hover{
background-color: blue;
padding: 30px 10px 30px 10px;
}
div{
width:250px;
height:666px;
background:#1A8DA9;
}
div a{
text-decoration:none;
color:white;
padding:20px;
padding-right:100px
}
div ul li{
list-style-type:none;
display:block;
padding :15px;
border-bottom:1px solid #236D7F;
}
div ul li :hover{
background:#4097AD;
transition:linear all 0.40s;
margin-left:10px;
}
div ul li a:hover{
color:black;
}
#navBar {
float: left;
position: fixed;
}
#nav {
float: right;
}
#maincontent{
width: 80%;
height: auto;
outline: 1px solid;
position: absolute;
right: 0;
background: white;
}
figure {
display: inline-block;
}
}
figure figcaption {
text-align: center;
}
iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}
.footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:green;
text-align: center;
}<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Videos</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="videos.css">
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<h1> Main logo </h1>
<ul id="nav">
<li><a class="homeblack" href="index.html">Home</a></li>
<li><a class="homered" href="videos.html">Videos</a></li>
<li><a class="homeblack" href="news.html">News</a></li>
<li><a class="homeblack" href="contactus.html">Contactus</a></li>
</ul>
</nav>
</header>
<div id="navBar">
<ul>
<li><a href="#">video </a></li>
<li><a href="#">video </a></li>
<li><a href="#">video </a></li>
<li><a href="#">video </a></li>
</ul>
</div>
<div id="maincontent">
<figure id="1">
<iframe width="300" height="240" src="https://www.youtube.com/embed/VORxzZazSnc" frameborder="0" allowfullscreen></iframe>
<figcaption> Trailer </figcaption>
</figure>
<figure id="2">
<iframe width="300" height="240" src="https://www.youtube.com/embed/VORxzZazSnc" frameborder="0" allowfullscreen></iframe>
<figcaption> Trailer</figcaption>
</figure>
<figure id="3">
<iframe width="300" height="240" src="https://www.youtube.com/embed/_fL4RuPcDw4" frameborder="0" allowfullscreen></iframe>
<figcaption> trailer </figcaption>
</figure>
<figure id="4">
<iframe width="300" height="240" src="https://www.youtube.com/embed/7yxNzMhXSr4" frameborder="0" allowfullscreen></iframe>
<figcaption> trailer </figcaption>
</figure>
<figure id="5">
<iframe width="300" height="240" src="https://www.youtube.com/embed/ljuBWvzZtyc" frameborder="0" allowfullscreen></iframe>
<figcaption> trailer</figcaption>
</figure>
<figure id="6">
<iframe width="300" height="240" src="https://www.youtube.com/embed/2ZBHa9gIOp4" frameborder="0" allowfullscreen></iframe>
<figcaption>Trailer</figcaption>
</figure>
</div>
<div class="footer">
<p style="color:white; font-size:20px; font-weight:bold;">Copyright © Education Students</p>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
答案 0 :(得分：1)
您可以使用ComboBox函数，不要与.load事件处理程序混淆。
load可用于将数据加载到元素 - 这里是参考http://api.jquery.com/load/
这里是一个如何使用的基本示例，代码与您的不同，它只是您使用的模板：）
HTML：
.load()jQuery的：
<button id="clickMe" type="button">Click Me</button>
<div id="targetLoad"></div>
这会将html.html加载到id为targetLoad的div中。
您的$('#clickMe').on('click', function()
{
$('#targetLoad').load('path/to/html.html')
});
功能的问题在于您使用的是单一世界，而不是类或ID。要使用.on()来定位ID，要使用#
没有完全意识到这是一个iframe - 这个问题是，因为它是一个动态元素，在技术上不是DOM的一部分，事件不会被解雇，或者至少不应该。但您可以使用以下内容来定位动态元素：
.
这将对目标具有myDynamicElement类的文档应用单击操作，这就是您如何使用动态元素。
要定位您的iframe，最好使用$(document).on('click', '.myDynamicElement', function() {})，因为iframe在某种程度上是它自己的实体。以上可能适用它，但我认为这应该工作
.find()如何使用动态事件处理的示例：
var element = $(document).find('.myIframe').find('figure');
$(document).on('click', element, function() {});
在这种情况下，每次更改一个具有.myDropdown类的输入，然后提醒它的当前值。
答案 1 :(得分：0)
您只是将youtube视频嵌入到框架中，因此youtube页面上的click事件将始终适用于youtube的视频功能，并且您的java脚本Click事件正在处理页面的名称“Trailer”。只需点击名称“预告片”并检查它是否正常工作。
而不是嵌入YouTube视频只需拥有视频的预览和网址，并在网址上点击一下即可将视频加载到您想要的单独页面上。