改变元素中的内容？

Question

我尝试在同一个容器内使用多部电影，当点击不同的按钮时让它们播放。

一个是我的登陆页面，一个是关于us...etc的。

我试图使用JavaScript编写一个函数，以相互依赖地调用电影。我想按一下导航按钮，然后弹出不同的东西。JavaScript是我认为我应该使用的，但我是一个**洞，所以我想我会问你们好人。我正在学习DOM，但实际上没有使用它的练习。我制作了一个图像地图，这是一个(swf.)当人们点击关于我们的时候，我想加载它，这是一部用于登陆页面的“快速时间”电影，也是我正在处理的一个文件，在登陆页电影运行后或者如果有人在家里点击，我就会运行和循环。正如我所说的，当有人单击导航按钮时，我希望它们都出现在同一个容器中。

我知道，就是这样.我被困住了，几天来我一直困惑于阅读不同的博客，w3schools，StackOverflow，QuirksMode...still --不知道如何恰当地处理它。

我想我应该首先创建一个单独的JavaScript文件。Duh

好的，我应该说得更具体些。WHERE DO THE OBJECTS GO? IN THE HTML OR JAVASCRIPT? HOW DO I REFERENCE THEM? OnClick, getElementById()...both????

我理解基本原则，所以我有信心，如果你给我一个提示，我可以正确地写代码，所以请不要打我的编程。

What I do know is they all have to be the same size, how to airbrush and screenprint...that doesn't help though, and how to go to w3schools and read.

Answer 1

对你来说，一本好书可能是基于JavaScript的PPK。一个很好的参考是Javascript:权威指南，第五版Edn (nb：第6 Edn，三月到期！)

下面是它应该如何为你工作：

你把你所有的资源都放到了一个HTML文件中--swf，图片，电影，等等。将所有可交换的东西放在他们自己的<div id="thingId" />元素中一个大的<div id="centrestage"/>元素中。现在看来事情会很混乱，但不要惊慌。对于要在页面加载时显示“第一”的元素，请将其设置为<div id="thingId" class="onstage" />

..。这会将所有资源都输入到HTML文件中。

( b)假设你所有的按钮都是img的，你会把<img id="button1" />，button2，button3等等。

( b)在HTML上附加一个样式表，其规则如下：

  div.centrestage div { display: none; }
  div.centrestage div.onstage { display: block; }

..。这隐藏了暂时不想显示的资源。

( c)将一个JavaScript附加到您的HTML中，执行以下操作：

  window.onLoad = function(e) {

     var centrestage = document.getElementById('centrestage');
     var r1 = document.getElementById('resource1');
     var r2 = document.getElementById('resource2');

     var currentResource = r1;

     var b1 = document.getElementById('button1');
     button1.onClick = function(e) {
         currentResource.className = '';
         r1.className = 'onstage';
         currentResource = r1;
     }

     var b2 = document.getElementById('button2');
     button1.onClick = function(e) {
         currentResource.className = '';
         r2.className = 'onstage';
         currentResource = r2;
     }

  }

..。注意这个脚本还没做任何事..。它只是将一些函数附加到一些onClick事件中，一些您已经按名称从DOM树中看到的对象。函数基本上是打开/关闭DIV的“onstage”类属性，其余部分则由样式表完成。

因为你可能得到了.一旦浏览器读取了HTML，就会得到一个“内存中”的DOM对象模型。一旦该模型完成加载，浏览器将查找在onLoad事件中注册的任何脚本，并执行它们。这种方式有助于将所有结构(HTML/ DOM )与外观(CSS)与行为(挂在DOM事件上的JavaScript)分开。

Answer 2

下面是我写的一个非常简单的例子。当点击链接时，它将用id 'panel‘更改div中的文本。

<html>
    <head>
        <script type="text/javascript">
            function changeContent()
            {
                var element = document.getElementById('panel');
                element.innerHTML = 'hello';
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="changeContent()">Click me</a>
        <div id="panel">after the click this will show hello</div>
    </body>
</html>

关键是element.innerHTML。在本例中，我只是添加了一个文本，但是当然您可以添加所需的任何HTML，例如SWF文件的嵌入代码。