0

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

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

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

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

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

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

<div id=“div3”&gt;
<div id=“link1div3” class=“section”&gt;</div>
<div id=“link2div3” class=“section”&gt;</div>
<div id=“link3div3” class=“section”&gt;</div>
<div id=“link4div3” class=“section”&gt;</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>
4

2 回答 2

1

我会尽量减少使用javascript并使用css，如下所示：

在这里演示

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>
于 2013-10-16T15:40:38.690 回答
0

仅显示其中一个的原因是，当您运行切换可见性时，您会使用该类获取每个元素，section然后将它们全部关闭，除了调用到函数中的 ONE。因此，当您的 onclick 完成运行时，您已打开前两个，然后在调用最后一个时将其关闭。

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

<div id=“div3”&gt;
   <div id=“link1div3” class=“section link1”&gt;</div>
   <div id=“link2div3” class=“section link2”&gt;</div>
   <div id=“link3div3” class=“section link3”&gt;</div>
   <div id=“link4div3” class=“section link4”&gt;</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>

如果该解决方案有效（我无法测试），它还将始终在页面上保留一些内容，我看到您在帖子中以粗体字提到了这些内容。

于 2013-10-16T15:27:20.177 回答