Question

早上好，

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

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

从其他页面到切换内容的链接有效但是它会打开页面的所有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”功能的切换内容。这是对的吗？

Answer 1

“如何链接来自其他网页的切换内容”是什么意思？鉴于您的代码，您似乎想要一个外部链接指向您的页面并切换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>

链接到页面并触发div上的切换内容

1 个答案:

工作版