在同一个div中显示/隐藏两个元素

Question

我遇到一个问题，在同一个div中打开一个元素而另一个元素关闭。我似乎创建了一个应该这样做的对象，当我点击它时，它隐藏了整个div，而不是打开一个元素，一个关闭。我需要添加什么才能使其工作？

CSS

#test1 {
    width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; display:none;
}

#test2 {
    width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden; display:block;
}

.mydiv {

}

#test {
    width:804px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden;
}

#labor{
    float:left; width:38px; height:125px;
}

#odc {
    float:left; width:32px; height:125px;
}

HTML

 <div id="test">
 <div class="mydiv" id="test1">
    <script src="../../Dashboard/Charts/FusionCharts.js" type="text/javascript"></script>
    <div id="line3ChartContainer" style="display:normal">
        <asp:Literal ID="Literal9" Visible="true" runat="server"></asp:Literal></div>
 </div>
 <div class="mydiv" id="test2">
    <script src="../../Dashboard/Charts/FusionCharts.js" type="text/javascript"></script>
    <div id="popChartContainer"  style="display:normal">
        <asp:Literal ID="Literal3" Visible="true" runat="server"></asp:Literal></div>
 </div>
 </div>

 <img src="../../images/labortab.png" id="labor" onmousedown="document.test1.visibility='false';document.test2.visibility='true';"/>
 <img src="../../images/odctab.png" id="odc" onmousedown="document.test1.visibility='true';document.line3ChartDiv.visibility='false';"/>

希望这样看起来更好看。

Answer 1

实现此目的最常用的方法

你应该使用jQuery而不是纯JavaScript。请按照以下步骤操作：

1. 创建一个名为 hidden 的类，在其中添加样式值 display：none
2. 在元素上使用 toggleClass 或 addClass / removeClass 来更改可见性。

以下是jQuery的代码示例：

$(function(){
    $('#labor').click(function(){
        $('div[name=test1]').addClass('hidden');
        $('div[name=test2]').removeClass('hidden');
    });

    $('#odc').click(function(){
        $('div[name=test1]').removeClass('hidden');
        $('div[name=test2]').addClass('hidden');
    });
});

这是一个演示（我试图使用你的大部分代码，因此有一些缺失的图像）：

• JsFiddle Demo

---

如何加速JavaScript代码

一个好的做法是创建一个用于在页面中隐藏元素的类（例如，“隐藏”），并在整个页面中将其用于此类目的。切换特定CSS样式的值效率较低，而且几乎总是建议您切换类。

以下是Google字体结束工程师Nicholas Zakas关于JavaScript优化的非常有启发性的演讲（这让我看到了JScript中的一些内容）：

• Speed Up Your JavaScript（YouTube视频）

---

如何实现jQuery

为了使用这个（以及无数其他）jQuery方法，你必须首先在你的应用程序中安装jQuery。不幸的是，对于初学者来说，这听起来有点压倒性。

安装jQuery的秘诀。 。

秘诀是要意识到安装jQuery实际上并不涉及安装本身。您需要在应用程序中使用jQuery才能引用jQuery代码文件。 提示：通过将jQuery代码复制/粘贴到文本文件中，并将其文件扩展名更改为.js，可以轻松创建jQuery代码文件。然后，要引用jQuery代码，只需在标题中放置一个引用链接。以下是我自己的网站标题之一的示例：



这意味着什么。 。

在这里，您将看到对三个不同JavaScript代码文件的引用。 第一个是一个向我的Visual Studio开发人员环境提供intelli-sense的文件。 第二个引用我的jQuery代码文件（这是你需要的文件，但是你必须更改文件的实际地址）。 第三个是对我的jQuery UI代码文件的引用。

从何处获取代码文件。 。

最新的jQuery代码文件可以下载from the jQuery home page或使用Google的编码库之一进行引用;他们在线托管了许多这些源代码，以便于访问。您可以在 Google Hosted Libraries - Developer Guide 中找到这些托管代码文件的目录。

视频教程说明了上述步骤。 。

我自己并没有真正看过它，但它显然帮助了许多崭露头角的网页设计师掌握了这个概念：

• jQuery Basics - Implementing jQuery（YouTube视频）

“。min”是什么意思？

您可能会注意到其中一些文件的名称中包含 .min 。所有这些都表明该文件已被“缩小”。这意味着代码以refractored的方式使其尽可能小，但对人类来说几乎是不可读的。你会看到这经常使用下载的jQuery文件完成;它们通常会带有一个普通版本（为了您的观看乐趣）和一个缩小版本以便更实用。