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

您可以创建另一个函数来处理链接:(切换功能后面的juste可以工作）

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末尾的哈希值并显示/隐藏相应的部分。

如果您对此工作的方式有任何疑问，请与我们联系。

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

3 个答案: