Question

我的主页上有3个特别感兴趣的部分。我想要做的是设置调用javascript函数的链接，确保隐藏2个部分，并且只显示单击按钮的部分。

这是我的代码：

            <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没有解雇。
我知道这不是最优雅（或必然有效）的方式，所以如果有人能提出更好的方法，我都会听到。

现在，我真的很喜欢这个，但我看不出问题。

Answer 1

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

Answer 2

＆lt; deep breath＆gt;

好的...

  if (id = "Agri") {

那是你的实际问题。您正在进行作业=而不是比较==。

现在改进代码。

“id”是独占的，是一个常量表达式，所以你可以在这里使用switch，但至少应该使用elseif。

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

同样，错误的操作在这里，但你也没有捕获对你所涉及的元素的引用，所以当你一遍又一遍地运行getElementById时你会失去性能。此外，您正在测试特定样式属性，因此您与实现紧密耦合。这使您的代码更不灵活，更容易出错。 CSS课程是你的朋友：使用它们，改变他们的应用程序，单独留下风格。

  } else { 
    return; 
  }

否则什么都不做？你这样做是为了弥补以前逻辑中缺少的elseif语句 - 这个块只是让人困惑。

Answer 3

我建议使用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");
}

可能不是很完美，但最好的我能想到最好的。

Answer 4

这只是一个建议，但您可以稍微重构一下代码。

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;
    }
}

使用Javascript进行内容切换

4 个答案: