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');

这样可以解决您的问题吗？

Answer 2

您可以创建另一个函数来处理链接：（仅在切换功能后面可以使用）

function goToContent(id){
    var el = document.getElementById(id);
    if(el.style.display != "block"){
        toggle(id);
    }
    el.scrollIntoView();
}

然后在html中引用它

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

看到这个小提琴： http : //jsfiddle.net/qZLsB/13/

尽管它应该可以工作，但是处理点击的“更简洁”的方式是使用JavaScript DOM事件。 如果您想学习它，可以在http://www.w3schools.com/js/js_htmldom_events.asp上阅读更多内容。

Answer 3

这是您尝试执行的简化示例。 我认为您只是把它复杂化了。 http://jsfiddle.net/j9HXk/

<p onclick="toggleContent('1')"><strong>HEADER1</strong></p>

您可以使用

单击事件以执行您的操作。 然后，您可以将一些代码放在onLoad事件中，以检查当前URL末尾的哈希，并显示/隐藏相应的部分。

让我知道您是否对此工作有任何疑问。