以下腳本有什麼作用

我有一個頁面，當我將鼠標懸停在鏈接上時，它會在頁面的另一部分上更改圖像和一些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>

這是怎麼腳本設置頁面中的一個元素？實際的頁面是：

Link to site

的標題下「流媒體軟件產品」 ...

來源

2011-05-27 Exitos

有你需要看明白這段代碼

<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>&nbsp;</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 &nbsp; <img src="/_common/images/px_more.gif" alt="Find out more" /></a></strong></p> 
      </div> 
     </div>

該div的ID是「content1」。所以showContent功能做了三兩件事：

如果有內容的div是可見，隱藏它（顯示=無）
進行所需內容的div 可見。
設置當前可見內容索引。

這會導致鏈接右側的內容在鼠標懸停時更改。

來源

2011-05-27 16:42:31

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

來源

2011-05-27 16:43:53 y34h

以下腳本有什麼作用

回答

相關問題