无法使用 onClick

Question

我有 2 个 div 和 1 个 iframe div。所以，我只需要添加动画来将这个 div 移动到左边，我不知道怎么做，因为我已经 onClick 了。你可以帮帮我吗？

<div id="page3" onClick='document.getElementById("ifr").src="text2.html";'>2</div>
<div id="page1" onClick='document.getElementById("ifr").src="text1.html";'>1</div>
<div id="middlediv"><iframe id='ifr' width='100%' height='100%' src="text1.html"</iframe></div> 

非常感谢！！！

所以，现在我有了这个 java 代码：

function proc1(){
wwidth=window.innerWidth;
wheight=window.innerHeight;
document.getElementById('rightdiv').style.height=wheight-200-10+'px';
document.getElementById('leftdiv').style.height=wheight-200-10+'px';
document.getElementById('middlediv').style.height=wheight-200-10+'px';
document.getElementById('middlediv').style.width=wwidth-200-10+'px';
}
function MoveGridLeft()
{
   $('#page3').animate({
   'marginLeft' : "+=50px"
   });
 }

还有这个脚本笔画<script type="text/javascript" src="jquery.min.js" src="1.js"> 1.js 有上面的代码。动画不起作用，脚本也不起作用

Answer 1

像 onclick 这样的内联处理程序中的所有 javascript 代码都会自动包装在一个函数中，请参阅 SO 上的 this question。

因此，您没有理由不能添加额外的语句（或本例中的函数调用），例如：
onclick="document.getElementById('ifr').src='text1.html'; moveDivLeft();"

更新（针对您更新的问题）：

• Java 与 javascript 等 EcmaScript 方言没有任何关系。
• 您从 Shafqat Masood's answer 复制的（依赖于 JQuery 的）函数 MoveGridLeft 增加了 左边距，因此它将 div 移动到 right 而不是移动它到左边。根据您的代码，您需要设置正确的属性（如左|右位置|边距）以实现您的目标（考虑到您现有的标记/布局/样式）。看看这个基于你所有 cmets 的 example jsfiddle（在这个问题下面）：jsfiddle.net/t74fT/3/
• 行：<script type="text/javascript" src="jquery.min.js" src="1.js"> 错误：您给了它 2 个无效标记的来源。
  每个（外部）脚本都有自己的脚本标签，例如：
  <script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="1.js"></script>
  请注意，现在您有 3 个文件，而不是像您最初要求的那样只有 1 个。

Answer 2

你可以在一个事件中调用两个函数

onClick='document.getElementById("ifr").src="text2.html"; MoveGridLeft();'

要移动的jQuery函数

function MoveGridLeft()
{
   $('#page3').animate({
   'marginLeft' : "-=50px"
   });
 }

更新：

从此link 下载 jQuery 文件并将对项目的引用添加为：

<script type="text/javascript" src="/scripts/jquery-1.9.1.min.js"></script>

这里是article，它解释了如何使用 CSS3 制作动画。