Question

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

一个是我的登陆页面，一个是关于我们...等等。

我正在尝试使用JavaScript编写一个函数来相互依赖地调用电影。我想按下导航按钮然后弹出不同的东西。 JavaScript是我认为我应该使用但我是一个**洞，所以我想我会问你好人。我正在研究DOM，但实际上没有使用它的练习。我制作了一张图片地图，这是我想在人们点击我们时加载的（swf。），一个用于着陆页的Quick Time电影，也是我正在努力运行并在着陆后循环的文件页面电影运行或有人点击家庭。正如我所说的，当有人点击导航按钮时，我希望它们都出现在同一个容器中。

我知道，就是这样......我被困住了，我已经困惑了几天阅读不同的博客，w3schools，StackOverflow，QuirksMode ......仍然不知道如何恰当地接近它。

我想我先创建一个单独的JavaScript文件。的咄

好的，我应该更具体。 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

这是我写的一个非常简单的例子。点击链接时，它会更改div中带有ID＆＃39; panel＆＃39;。

的文本

<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文件的嵌入代码。

Answer 2

一本好书可能是PPK on JavaScript。一个很好的参考是Javascript: The Definitive Guide, 5th Edn（nb：6th Edn到期三月！）

以下是它应该如何运作：

a）您将所有资源放入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）从行为分开（JavaScript挂起DOM事件）。

更改元素内的内容？

2 个答案: