使用Javascript切换内容

我在我的主页上有3个特定部分。我想要做的是设置链接，调用一个javascript函数，确保2个部分被隐藏，并且只显示按钮被点击的部分。使用Javascript切换内容

这里是我的代码：

  <div id="idc" class="leftFloat"><span id="title" class="title1">Introduction</span></div> 
      <div class="rightFloat"> 
       <div id="agri"><a onclick="ContentSwitch('Agri');">Agri Industries</a></div> 
       <div id="ict"><a onclick="ContentSwitch('ict');">ICT Investments</a></div> 
       <div id="intro"><a onclick="ContentSwitch('intro');">Introduction</a></div> 
      </div> 

      <div id="agriContent" style="display: none;"> 
       <div class="vrtlay_both">AGRI INDUSTRIES</div> 
      </div> 

      <div id="ictContent" style="display: none;"> 
       <div class="vrtlay_both">ICT INVESTMENTS</div> 
      </div> 

      <div id="introContent"> 
       <div class="vrtlay_both">ICT INVESTMENTS</div> 
      </div> 

      <script type="text/javascript"> 
       function ContentSwitch(id) { 
        if (id = "Agri") { 
         if (document.getElementById("agriContent").style.display = "none") { 
          document.getElementById("agriContent").style.display = "block"; 

          // Hide other content 
          document.getElementById("ictContent").style.display = "none"; 
          document.getElementById("introContent").style.display = "none"; 

          // Change the look of the title 
          document.getElementById("idc").style.backgroundColor = "rgb(0, 100, 0)"; 
          document.getElementById("idc").style.color = "rgb(255, 255, 255)"; 
          document.getElementById("title").innerHTML = "Agri Industries"; 
         } else { 
          return; 
         } 
        } 
        if (id = "ict") { 
         if (document.getElementById("ictContent").style.display = "none") { 
          document.getElementById("ictContent").style.display = "block"; 

          // Hide other content 
          document.getElementById("agriContent").style.display = "none"; 
          document.getElementById("introContent").style.display = "none"; 

          // Change the look of the title 
          document.getElementById("idc").style.backgroundColor = "rgb(36, 46, 111)"; 
          document.getElementById("idc").style.color = "rgb(255, 255, 255)"; 
          document.getElementById("title").innerHTML = "ICT Investments"; 
         } else { 
          return; 
         } 
        } 
        if (id = "intro") { 
         if (document.getElementById("introContent").style.display = "none") { 
          document.getElementById("introContent").style.display = "block"; 

          // Hide other content 
          document.getElementById("agriContent").style.display = "none"; 
          document.getElementById("ictContent").style.display = "none"; 

          // Change the look of the title 
          document.getElementById("idc").style.backgroundColor = "rgb(255, 255, 255)"; 
          document.getElementById("idc").style.color = "rgb(0, 0, 0)"; 
          document.getElementById("title").innerHTML = "Introduction"; 
         } else { 
          return; 
         } 
        } 
       } 
      </script>

JavaScript的不点火。
我知道这不是最优雅的（或必然有效的）做法，所以如果任何人都可以提出一个更好的方法，我全是耳朵。

现在虽然，我只是非常喜欢这个工作，但我看不出问题所在。

来源

2010-09-27 Logan Young

Javascript中的比较使用double equals运算符（==），而不是一个等号，因此您将在if语句中分配值。尝试改变它们，看看它是否有效。

来源

2010-09-27 13:48:13 Jess

第一个'if'语句总是评估为'true'，所以我相信你是正确的。 – ChaosPandion 2010-09-27 13:50:09

O.o就是这么简单......我以为我记得有关'=='的一些东西只是不确定，非常感谢:) – 2010-09-27 13:50:48

好的。此外，我建议重构代码以减少所有冗余document.getElementById（）的处处，即帮助可读性。此外，没有其他需要{return; }如果海报做“其他如果”而不是“如果”。 – Paul 2010-09-27 13:51:30

<深呼吸>

好吧......

if (id = "Agri") {

那么有你的实际问题。你正在做一个任务=不是比较==。

现在改进代码。

“id”是唯一的，并且是一个常量表达式，因此您应该在这里使用switch，但您至少应该使用elseif。

if (document.getElementById("agriContent").style.display = "none") {

同样，错误操作在这里，但你也不能捕捉到你在当您运行的getElementById一遍又一遍，所以你正在失去高性能intertested元素的引用。此外，您正在测试特定的样式属性，以便与实现紧密结合。这会让你的代码更加灵活，而且更容易出错。 CSS类是你的朋友：使用它们，改变他们的应用程序，独自离开风格。

} else { 
    return; 
    }

其他什么都不做？你这样做是为了弥补之前逻辑中缺少elseif语句 - 这个模块只是令人困惑。

来源

2010-09-27 13:56:38 annakata

我建议使用CSS类和jQuery来做到这一点。

而是传递一个字符串值做这样的事情：

<div id="agri"><a onclick="ContentSwitch($("#agriContent"));">Agri Industries</a></div> 
<div id="ict"><a onclick="ContentSwitch($("#ictContent"));">ICT Investments</a></div> 
<div id="intro"><a onclick="ContentSwitch($("#introContent"));">Introduction</a></div>

在你的内容的面板，这样做：

<div id="agriContent" class="invisible"> 
     <div class="vrtlay_both">AGRI INDUSTRIES</div> 
    </div> 

    <div id="ictContent" class="invisible"> 
     <div class="vrtlay_both">ICT INVESTMENTS</div> 
    </div> 

    <div id="introContent" class="visible"> 
     <div class="vrtlay_both">ICT INVESTMENTS</div> 
    </div>

然后，在ContentSwitch，做这样的事情：

function ContentSwitch(div) { 
     $(".visible").addClass("invisible").removeClass("visible"); 
     div.removeClass("invisible").addClass("visible"); 
}

可能不完美，但最好的我可以拿出我的头顶。

来源

2010-09-27 13:59:46 clifgriffin

而且，很明显，您会设置这些CSS类并将它们设置为隐藏或适当地显示。 – clifgriffin 2010-09-27 14:13:41

这只是一个建议，但你可以重构你的代码。

var agriContent, ictContent, introContent, idc, title; 

function ContentSwitch(id) { 
    agriContent = agriContent || document.getElementById("agriContent"); 
    ictContent = ictContent || document.getElementById("ictContent"); 
    introContent = introContent || document.getElementById("introContent"); 
    idc = idc || document.getElementById("idc"); 
    title = title || document.getElementById("title");   
    switch (id) { 
     case "Agri": 
      if (agriContent.style.display !== "none") { 
       return; 
      } 
      agriContent.style.display = "block"; 
      ictContent.style.display = "none"; 
      introContent.style.display = "none"; 
      idc.style.backgroundColor = "rgb(0, 100, 0)"; 
      idc.style.color = "rgb(255, 255, 255)"; 
      title.innerHTML = "Agri Industries"; 
      break; 
     case "ict": 
      // ... 
      break; 
     case "intro": 
      // ... 
      break; 
    } 
}

来源

2010-09-27 14:00:08 ChaosPandion

使用Javascript切换内容

回答

相关问题