Question

下午，我希望你能帮助我对这个页面进行最后润色。基本上我有四个链接 - 每个链接将链接到不同版本的内容 - 将通过切换可见性显示在相同的3个div中。也就是说onload，将显示第一个链接的内容（在三个div中），然后目标是当点击四个链接中的另一个时，来自打开链接的可见内容关闭，而点击链接的内容将打开。（我迄今为止在代码中成功避免的一件事 - 我在最终模型中急于避免 - 将页面切换为空。也就是说如果显示link1的内容并再次单击link1 ，内容保持可见，不会简单地打开和关闭。）

现在使用下面的标记我非常接近（！），除了以下......

当页面加载时，第一个链接的内容显示为我想要的内容，但每当您单击其他3个链接中的一个时，只有div1的内容成功加载而其他两个div变为空。我试图改变toggleVisibility编码（我非常粗略地知道！），以便按照以下方式处理4个链接中的每一个;

<a href=“#” onclick=“togglevisibility(‘link1div1’); togglevisibility(‘link1div2’);togglevisibility(‘link1div3’);”>Link 1</a>

有没有办法从链接行（上面）中修复此错误，以便单击链接将相应的内容加载到所有三个div而不仅仅是第一个？我确信这很简单，我忽略了或编码错误！

非常感谢您的时间和建议。

CSS

.section {display:none;}

#link1div1 {display:block;}
#link1div2 {display:block;}
#link1div3 {display:block;}

HTML

<a href=“#” onclick=“togglevisibility(‘link1div1’); togglevisibility(‘link1div2’);togglevisibility(‘link1div3’);”>Link 1</a> 
<a href=“#” onclick=“togglevisibility(‘link2div1’); togglevisibility(‘link2div2’);togglevisibility(‘link2div3’);”>Link 2</a>
<a href=“#” onclick=“togglevisibility(‘link3div1’); togglevisibility(‘link3div2’);togglevisibility(‘link3div3’);”>Link 3</a>
<a href=“#” onclick=“togglevisibility(‘link4div1’); togglevisibility(‘link4div2’);togglevisibility(‘link4div3’);”>Link 4</a>

<div id=“div1”>
<div id=“link1div1” class=“section”></div>
<div id=“link2div1” class=“section”></div>
<div id=“link3div1” class=“section”></div>
<div id=“link4div1” class=“section”></div>
</div>

<div id=“div2”>
<div id=“link1div2” class=“section”></div>
<div id=“link2div2” class=“section”></div>
<div id=“link3div2” class=“section”></div>
<div id=“link4div2” class=“section”></div>
</div>

<div id=“div3”>
<div id=“link1div3” class=“section”></div>
<div id=“link2div3” class=“section”></div>
<div id=“link3div3” class=“section”></div>
<div id=“link4div3” class=“section”></div>
</div>

JS

<script type="text/javascript">
function toggleVisibility(selectedTab) {
     var section = document.getElementsByClassName('section')
     for(var i=0; i<section.length; i++) {
          if(section[i].id == selectedTab) {
                section[i].style.display = 'block';
          } else {
                section[i].style.display = 'none';
          }
     }
}
</script>

Answer 1

我会尽量减少javascript的使用，并使用css执行此操作，如下所示：

<强> DEMO HERE

<强>的javascript：

function clickHandler(lnk) {
    document.getElementById('sections').className = lnk;
    return false;
}

<强>的CSS：

#sections .section {display:none;}
#sections.link1 .link1,
#sections.link2 .link2,
#sections.link3 .link3,
#sections.link4 .link4 { display: block; }

<强> HTML：

<a href="#" onclick="clickHandler('link1')">Link 1</a> 
<a href="#" onclick="clickHandler('link2')">Link 2</a>
<a href="#" onclick="clickHandler('link3')">Link 3</a>
<a href="#" onclick="clickHandler('link4')">Link 4</a>

<div id="sections" class="link1">
    <div id="div1">
        <div id="link1div1" class="section link1">11</div>
        <div id="link2div1" class="section link2">21</div>
        <div id="link3div1" class="section link3">31</div>
        <div id="link4div1" class="section link4">41</div>
    </div>

    <div id="div2">
        <div id="link1div2" class="section link1">12</div>
        <div id="link2div2" class="section link2">22</div>
        <div id="link3div2" class="section link3">32</div>
        <div id="link4div2" class="section link4">42</div>
    </div>

    <div id="div3">
        <div id="link1div3" class="section link1">13</div>
        <div id="link2div3" class="section link2">23</div>
        <div id="link3div3" class="section link3">33</div>
        <div id="link4div3" class="section link4">43</div>
    </div>
</div>

Answer 2

只有其中一个显示的原因是因为当您运行切换可见性时，您将获得具有类section的每个元素，然后将它们全部切换掉，除了调用函数的ONE。因此，当你的onclick完成运行时，你打开了前两个，然后在你拨打最后一个时关掉它们。

一个简单的解决方法是给大div中的每个div一个确定链接的类名。

<div id=“div3”>
   <div id=“link1div3” class=“section link1”></div>
   <div id=“link2div3” class=“section link2”></div>
   <div id=“link3div3” class=“section link3”></div>
   <div id=“link4div3” class=“section link4”></div>
</div>

对其他div做同样的事情。然后你的链接就像这样......

<a href=“#” onclick=“togglevisibility(‘link1’);>Link 1 </a>

将您的javascript更改为。

<script type="text/javascript">
function toggleVisibility(selectedClass) {
     var turnOn = document.getElementsByClassName('selectedClass');
     var allDivs = document.getElementsByClassName('section');
     for(var i=0; i<section.length; i++) { //this for loop hides all the divs
        section[i].style.display = 'none';
     }
     for(var i=0; i<turnOn.length; i++) { // this for loop shows the divs 
        turnOn[i].style.display = 'block'; // with the link1 class
     }
}
</script>

这个解决方案如果有效（我无法测试）也会在页面上随时保留一些内容，我看到你在帖子中以粗体显示了这些内容。

切换可见性多个div javascript

2 个答案: