javascript - document.getElementById 隐藏文本对于菜单中的书签不可见

Question

我正在使用 javascript document.getElementById 更改图像并在包含 17 种不同服务和扩展描述的服务登录页面上隐藏和显示文本。正如现在设置的那样，登陆页面打开时所有服务都关闭，每个标题行旁边都有一个加号图像。当用户单击图像或标题时，图像变为减号，文本展开以显示隐藏的文本。展开后，用户可以再次单击图像或标题，它会收缩并显示为最初登陆时的样子。

这是我正在使用的脚本:

    <script type="text/javascript">
    <!--
    function showHide(HID,IMG) {
    if (document.getElementById(IMG).src.indexOf('expand') != -1) {
    document.getElementById(IMG).src='../_media/images/common      
    /collapse.jpg';
    document.getElementById(HID).className='visibleRow';
    } else {
    document.getElementById(IMG).src='../_media/images/common
    /expand.jpg';
    document.getElementById(HID).className='hiddenRow';
    }
    }
    // -->
    </script>

这是我正在使用的 html(以一行为例):

    <tr bgcolor="#051846">
    <td>
    <img id="image2" border="0" src="../_media/images/common/expand.jpg" 
    onclick="showHide('divHidden2','image2');" style="cursor:pointer; 
    float:left; margin: 10px 10px 0px 20px;" alt="" />&nbsp;
    <span style="font-family: verdana, arial, sans-serif; font-size: 
    20px; font-weight:normal;color: #ffffff;cursor:pointer;line-height: 
    40px;font-variant: small-caps;margin: 0px 0px 10px 0px;"  
    onclick="showHide('divHidden2','image2');">Buy/Sell Decisions</span>
    </td>
    </tr>
    <tr>
    <td>
    <div id="divHidden2" name="divHidden2" class="hiddenRow"><ul 
    class="hidden">
    <li>Corporate divestitures and purchases.</li>
    <li>Underwater resort in the Fiji Islands.</li>
    <li>High-end golf community in southern Spain.</li>
    <li>3,235-hectare multi-use commercial land subdivision in South    
    Africa.</li>
    </ul>
    </div>
    </td>
    </tr>

我正在尝试将主菜单从主页链接到服务页面，为每个隐藏的细节创建一个 anchor :

    <div id="divHidden2" name="divHidden2" class="hiddenRow">

在主页和菜单上是所有服务的列表，带有指向服务页面和 anchor 的超链接。

    <a href="services/services.shtml#divHidden2">

我创建 anchor 的过程似乎有效，但是，我无法在打开页面时显示隐藏文本。我已经研究过在 href 和许多其他方法中包含 javascript，但没有任何方法能够将某人从主页引导到扩展了该特定服务的服务页面。我的初始页面通过了 W3C 验证测试。

谢谢。

Answer 1

首先，在 HTML 页面上添加 CSS 和 Javascript 不是一个好的做法。 使用 setAttribute 方法怎么样？

var img = document.getElementById('divID');
img.onclick = foo;
function foo(img) {
  img.setAttribute("style", "display:none");
}

当我强调 W3 验证测试时，我希望有人能告诉我这个技巧。我只是给了你隐藏代码的代码。您可以通过将样式设置为 display:block 来找到一种显示图像的方法。