将两个元素可见/隐藏在同一个 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 代码

一个好的做法是创建一个类来隐藏页面中的元素（例如，'hidden'），并在整个页面中使用它来实现类似的目的。切换特定 CSS 样式的值效率较低，几乎总是建议您切换类。

这是来自 Google 字体端工程师 Nicholas Zakas 关于 JavaScript 优化的非常有启发性的讲座（这让我对JScript 中的一些事情大开眼界）：

• Speed Up Your JavaScript（YouTube 视频）

---

如何实现jQuery

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

安装 jQuery 的秘诀。 . .

秘密是要意识到安装 jQuery 实际上并不涉及 安装 本身。要在应用程序中使用 jQuery，您需要做的就是引用 jQuery 代码文件。 提示： jQuery 代码文件很容易通过将 jQuery 代码复制/粘贴到文本文件中，并将其文件扩展名更改为 .js 来轻松创建。然后，要引用 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 文件完成此操作；它们通常会附带一个普通版本（为了您的观看乐趣）和一个缩小版本以便更实用。