单击链接时JavaScript函数无法工作我有一个相当简单的页面，其中有一个侧边栏导航和一个iframe来加载内容。我想通过点击侧栏导航中的链接来改变iframe的内容。我使用javascript来更改document.Element的源(.src)。我读过许多文章(StackOverflow)，代码应该能工作，但根本不起作用。下面的代码是我创建的html页面，它在标记中包含了JS。<head><meta charset="UTF-8"><title>Untitled Document</title><link href="css/default.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function getContent{
document.getElementById("contentFrame").src="LoremIpsum.html";
}
</script></head><body><div class="sidebar"><h1>Technical Documentation</h1><ul>
<li>Configuration Guides</li>
<li>API Guides</li>
<li><a href="" onclick='getContent()'> LoremIpsum</a></li></ul><!-- <button onclick="getContent()">Lorem Ipsum</button>
--></div><iframe class="content" id="contentFrame" src="dummy.html"></iframe></body>
3 回答
一只甜甜圈
TA贡献1836条经验 获得超5个赞
函数声明中有语法错误(缺少括号)：
function getContent {
document.getElementById("contentFrame").src="LoremIpsum.html";
}
应：
function getContent() {
document.getElementById("contentFrame").src="LoremIpsum.html";
}
还需要防止链接的默认事件。
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function getContent(event) {
event.preventDefault();
document.getElementById("contentFrame").src="LoremIpsum.html";
}
</script>
</head>
<body>
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
<li>Configuration Guides</li>
<li>API Guides</li>
<li><a href="#" onclick='getContent(event)'> LoremIpsum</a></li>
</ul>
<!-- <button onclick="getContent()">Lorem Ipsum</button> -->
</div>
<iframe class="content" id="contentFrame" src="dummy.html">
</iframe>
</body>
添加回答
举报
0/150
提交
取消