下面的脚本做了什么

发布于 2024-11-09 23:55:59 字数 923 浏览 2 评论 0原文

我有一个页面,当我将鼠标悬停在链接上时,它会更改页面另一部分上的图像和一些 html。但是,我想知道这个脚本是如何工作的,以及当我查看页面顶部的脚本时:

  <script type="text/javascript">
    var CONTENT_CURRENT = 0;

    showContent = function() {
        if (CONTENT_CURRENT > 0) {
            var o = YAHOO.util.Dom.get('content' + CONTENT_CURRENT);
            o.style.display = 'none';

            var a = YAHOO.util.Dom.get('link' + CONTENT_CURRENT);
            a.style.color = '#46689e';
        }
        var c = YAHOO.util.Dom.get('content' + arguments[0]);
        c.style.display = 'block';

        var l = YAHOO.util.Dom.get('link' + arguments[0]);
        l.style.color = '#000000';

        CONTENT_CURRENT = arguments[0];
    };

    YAHOO.util.Event.onDOMReady(function() { showContent('1'); });
  </script>

这个脚本如何设置页面上的元素?实际页面位于:

网站链接

在“流媒体软件产品”标题下...

I have a page and when I mouse over the links it changes an image and some html on another portion of the page. However Im wondering how this script works and when I look at the script at the top of the page:

  <script type="text/javascript">
    var CONTENT_CURRENT = 0;

    showContent = function() {
        if (CONTENT_CURRENT > 0) {
            var o = YAHOO.util.Dom.get('content' + CONTENT_CURRENT);
            o.style.display = 'none';

            var a = YAHOO.util.Dom.get('link' + CONTENT_CURRENT);
            a.style.color = '#46689e';
        }
        var c = YAHOO.util.Dom.get('content' + arguments[0]);
        c.style.display = 'block';

        var l = YAHOO.util.Dom.get('link' + arguments[0]);
        l.style.color = '#000000';

        CONTENT_CURRENT = arguments[0];
    };

    YAHOO.util.Event.onDOMReady(function() { showContent('1'); });
  </script>

How is this script setting the an element on the page? The actual page is at:

Link to site

Under the title 'Streaming Software Products'...

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

软甜啾 2024-11-16 23:55:59

您需要查看另一个代码块才能理解此代码。

  <div class="real-products-mid-lh">
    <a id="link5" href="/products/helix_server.aspx" onmouseover="showContent('5')">Helix Server</a><br />
    <a id="link1" href="/products/rlp.aspx" onmouseover="showContent('1')">Real License Program</a><br />
    <a id="link2" href="/products/helix_security_manager.aspx" onmouseover="showContent('2')">Helix Security Manager</a><br />
    <a id="link3" href="/products/real_player_enterprise_manager.aspx" onmouseover="showContent('3')">RealPlayer Enterprise</a><br />
    <a id="link4" href="/products/helix_mobile_server.aspx" onmouseover="showContent('4')">Helix Mobile Server</a><br />
    <a id="link6" href="/products/helix_proxy.aspx" onmouseover="showContent('6')">Helix Proxy</a><br />
    <a id="link7" href="/products/real_producer.aspx" onmouseover="showContent('7')">RealProducer</a><br />
    <a id="link8" href="/products/capture_station.aspx" onmouseover="showContent('8')">Accordent Capture Station</a><br />
    <a id="link9" href="/products/elp.aspx" onmouseover="showContent('9')">Real Education Licensing</a><br />
    <a id="link10" href="/products/helix_mobile_producer.aspx" onmouseover="showContent('10')">Helix Mobile Producer</a>
  </div>

这里列表中的每个链接都以索引作为参数调用 showContent。下面有一堆像这样的 div:

 <div id="content1" style="display:none;">
          <div class="real-products-mid-rh">
            <div class="real-products-logos">
              <table width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #d6d6d6; height:107px;">
                <tr>
                  <td align="center"><a href="/products/rlp.aspx"><img src="/_common/images/logo_real_sm.gif" alt="Real License Program" style="vertical-align:middle" /></a></td>
                </tr>
              </table>
              <table width="100%" cellpadding="0" cellspacing="0" style="border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; padding-top:5px; padding-bottom:5px;">
                <tr align="center">
                  <td><a href="/products/rlp.aspx"><strong>LICENSE PROGRAM</strong></a></td>
                  <td><a href="/products/rlp.aspx"><img src="/_common/images/px_more.gif" alt="Find out more" /></a></td>
                  <td> </td>
                </tr>
              </table>
            </div>
            <p><strong>Cost effective and all encompassing RealNetworks License Programme available exclusively to UK enterprise customers<br />
              <a href="/products/rlp.aspx">Real License Program   <img src="/_common/images/px_more.gif" alt="Find out more" /></a></strong></p>
          </div>
      </div>

该 div 的 ID 是“content1”。所以 showContent 函数做了三件事:

  1. 如果有一个内容 div
    可见,使其隐藏
    (display=none)
  2. 制作想要的内容div
    可见的。
  3. 设置当前可见内容
    指数。

这会导致链接右侧的内容在鼠标悬停时发生变化。

There is another code block you need to look at to understand this code

  <div class="real-products-mid-lh">
    <a id="link5" href="/products/helix_server.aspx" onmouseover="showContent('5')">Helix Server</a><br />
    <a id="link1" href="/products/rlp.aspx" onmouseover="showContent('1')">Real License Program</a><br />
    <a id="link2" href="/products/helix_security_manager.aspx" onmouseover="showContent('2')">Helix Security Manager</a><br />
    <a id="link3" href="/products/real_player_enterprise_manager.aspx" onmouseover="showContent('3')">RealPlayer Enterprise</a><br />
    <a id="link4" href="/products/helix_mobile_server.aspx" onmouseover="showContent('4')">Helix Mobile Server</a><br />
    <a id="link6" href="/products/helix_proxy.aspx" onmouseover="showContent('6')">Helix Proxy</a><br />
    <a id="link7" href="/products/real_producer.aspx" onmouseover="showContent('7')">RealProducer</a><br />
    <a id="link8" href="/products/capture_station.aspx" onmouseover="showContent('8')">Accordent Capture Station</a><br />
    <a id="link9" href="/products/elp.aspx" onmouseover="showContent('9')">Real Education Licensing</a><br />
    <a id="link10" href="/products/helix_mobile_producer.aspx" onmouseover="showContent('10')">Helix Mobile Producer</a>
  </div>

Here each link in the list calls showContent with an index as the argument. There are a bunch of divs below like this one:

 <div id="content1" style="display:none;">
          <div class="real-products-mid-rh">
            <div class="real-products-logos">
              <table width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #d6d6d6; height:107px;">
                <tr>
                  <td align="center"><a href="/products/rlp.aspx"><img src="/_common/images/logo_real_sm.gif" alt="Real License Program" style="vertical-align:middle" /></a></td>
                </tr>
              </table>
              <table width="100%" cellpadding="0" cellspacing="0" style="border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; padding-top:5px; padding-bottom:5px;">
                <tr align="center">
                  <td><a href="/products/rlp.aspx"><strong>LICENSE PROGRAM</strong></a></td>
                  <td><a href="/products/rlp.aspx"><img src="/_common/images/px_more.gif" alt="Find out more" /></a></td>
                  <td> </td>
                </tr>
              </table>
            </div>
            <p><strong>Cost effective and all encompassing RealNetworks License Programme available exclusively to UK enterprise customers<br />
              <a href="/products/rlp.aspx">Real License Program   <img src="/_common/images/px_more.gif" alt="Find out more" /></a></strong></p>
          </div>
      </div>

That div's ID is "content1". So the showContent function does three things:

  1. If there is a content div that is
    visible, make it hidden
    (display=none)
  2. Make the desired content div
    visible.
  3. Set the current visble content
    index.

This cause the content to the right of the links to change on mouse over.

行雁书 2024-11-16 23:55:59

YAHOO.util.Dom.get() 的工作方式类似于 document.getElementById()

o.style.display = 'none';  // hides current content
a.style.color = '#46689e'; // paints current link blue
c.style.display = 'block'; // displays new content
l.style.color = '#000000'; // paints new link black

YAHOO.util.Dom.get() works like document.getElementById()

o.style.display = 'none';  // hides current content
a.style.color = '#46689e'; // paints current link blue
c.style.display = 'block'; // displays new content
l.style.color = '#000000'; // paints new link black
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文