0

早上好，

自上周以来，我一直在努力解决一个看似常见的问题（考虑到我读过的有关此问题的主题数量）：如何链接来自另一个页面的切换内容。

我已经能够进入这个话题。我仍然面临一个问题（像往常一样，解决方案或答案会导致另一个问题！）：

从另一个页面到切换内容的链接有效，但它打开了页面的所有 div。问题很简单：如何切换单个 div 的内容？

我的代码如下（它是页面内容的摘录 - 我有超过 2 个带有切换内容的 div）。是的，我知道这很丑陋，但我正试图在 HTML/CSS 和其他方面取得成功，但没有太多帮助。

非常感谢！

 <style type="text/css">
 #ToggleTarget {
 display: none;
 }
</style>
<SCRIPT type=text/javascript>
function Toggle() {
 var el = document.getElementById("ToggleTarget");
 if (el.style.display == "block") {
  el.style.display = "none";
 }
 else {
  el.style.display = "block";
 }
}
</SCRIPT>
<style type="text/css">
    #ToggleTarget2 {
    display: none;
    }
</style>
<SCRIPT type=text/javascript>
function Toggle2() {
 var el = document.getElementById("ToggleTarget2");
 if (el.style.display == "block") {
  el.style.display = "none";
 }
 else {
  el.style.display = "block";
 }
}
</SCRIPT>



<body>
<p><a href="javascript:Toggle();" name="link1"><span><strong>TITLE1</strong></span></a></p>
                                    <div class="ToggleTarget" id="ToggleTarget">
                                    <p align="justify">CONTENT1</div>
<p><a href="javascript:Toggle2();" name="link2"><span><strong>TITLE2</strong></span></a></p>
                                    <div class="ToggleTarget2" id="ToggleTarget2">
                                    <p align="justify">CONTENT2</div>
</body>

<SCRIPT type=text/javascript>
if ( location.hash.length > 1 )
{
    Toggle( location.hash.substring(1) );
    Toggle2( location.hash.substring(1) );

}
</SCRIPT>

编辑：我想问题来自：

if ( location.hash.length > 1 )
{
    Toggle( location.hash.substring(1) );
    Toggle2( location.hash.substring(1) );

}

如果（ location.hash.length > 1 ），它会从“Toggle”和“Toggle2”功能打开两个切换的内容。那是对的吗？

4

1 回答 1

0

“如何链接来自另一个页面的切换内容”是什么意思？鉴于您的代码，您似乎想要一个外部链接指向您的页面并切换 div，对吗？

如果是这样的话，那么有一些事情需要改变。首先，这...

Toggle( location.hash.substring(1) );

...不会像您希望的那样工作。实际上，您的函数Toggle() 不带任何参数。

div但是，您可以制作一个更“通用”的函数版本，它将切换的 ID 作为参数：

function Toggle(id) {
    var el = document.getElementById(id);
    if (el.style.display == "block") {
        el.style.display = "none";
    } else {
        el.style.display = "block";
    }
}

在页面的末尾...

if (location.hash.length > 1) {
    Toggle(location.hash.substring(1));
}

例如，如果您的页面名为 ，mypage.html则指向的链接mypage.html#example-id将加载您的页面并切换 ID 的元素example-id。

最后一件事; 而不是应用于display: none每个可切换的 div，而是创建一个类ToggleTarget并给它display: none。然后，将此类赋予您拥有的每个可切换元素，同时赋予它们唯一的 ID。

工作版本

<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            .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";
                }
            }
        </script>
    </head>
    <body>
        <p><a href="javascript:toggle('1');"><strong>TITLE1</strong></a></p>
        <div class="ToggleTarget" id="1">
            <p align="justify">CONTENT1</p>
        </div>
        <p><a href="javascript:toggle('2');"><strong>TITLE2</strong></a></p>
        <div class="ToggleTarget" id="2">
            <p align="justify">CONTENT2</p>
        </div>
        <script type="text/javascript">
            if (location.hash.length > 1) {
                toggle(location.hash.substring(1));
            }
        </script>
    </body>
</html>
于 2013-07-22T10:20:45.967 回答