Javascript - 切换内容功能只能使用一次

Question

在编码方面不是很自在，非常感谢您对我面临的问题的帮助:

在着陆页上，一些内容应该在点击或点击页面顶部的目录时可见。

单击切换有效。但是，单击菜单项只能使用一次。然后，如果我返回菜单并单击菜单的另一个元素，则什么也没有发生

我的猜测是问题出在应该合并在一起的“分离”脚本。

代码如下:

<style type="text/css">
    a img
    {
    border: 0;
    }
</style>
<style>
    .ToggleTarget {
    display: none;
    }
</style>
<script type="text/javascript">
            function toggle(id) {
                var el = document.getElementById(id);
                if (el.style.display == "block") {
                    el.style.display = "none";
                } else {
                    el.style.display = "block";
                    el.style.background= "white";
                }
            }
        </script>

<script type=text/javascript>
if ( location.hash.length > 1 )
{
    toggle(location.hash.substring(1));
}
</script>


Content

<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="#1">Title1</a>
<br>
<strong><a style="COLOR: #4b4b4b; TEXT-DECORATION: none" href="#2">Title2</a>

Content


<table cellspacing="0" cellpadding="0" width="100%">
                <tbody>
                    <tr>
                        <td width="100%" style="PADDING-TOP: 3px; PADDING-Bottom: 3px" bgcolor="#005a84" valign="top" colspan="4" align="left"><a style="COLOR: rgb(75,75,75); FONT-WEIGHT: bold; TEXT-DECORATION: none" href="javascript:toggle('1');">
                        <p style="text-decoration: none; font-family: Arial; font-size: 13px; color: rgb(255, 255, 255); height:10px; line-height:18px;"><strong>HEADER1
                        </strong></p>
                        </a>
                        <div id="1" class="ToggleTarget" style="padding-left:10px"><br>
CONTENT1
                        </div>
</td>
                    </tr>
                    <tr>
                        <td width="100%" style="PADDING-TOP: 3px; PADDING-Bottom: 3px" bgcolor="#005a84" valign="top" colspan="4" align="left"><a style="COLOR: rgb(75,75,75); FONT-WEIGHT: bold; TEXT-DECORATION: none" href="javascript:toggle('2');">
                        <p style="text-decoration: none; font-family: Arial; font-size: 13px; color: rgb(255, 255, 255); height:10px; line-height:18px;"><strong>HEADER2
                        </strong></p>
                        </a>
                        <div id="2" class="ToggleTarget" style="padding-left:10px"><br>
CONTENT2
                        </div>
</td>
                    </tr>
                </tbody>
            </table>

非常感谢!

Answer 1

如何改变

href="javascript:toggle('2”);

到

href="javascript:toggle('2');

这是否解决了您的问题？