将两个元素可见/隐藏在同一个div中

 

我遇到了一个问题打开一个元素，另一个关闭在同一个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';"/>

希望这是更好看。

完成此操作的最常用方法

你应该使用jQuery而不是纯粹的JavaScript。 按着这些次序：

  • 创建一个名为hidden的类，并在其中添加样式值display：none
  • 使用元素上的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演示

    • 如何加快你的JavaScript代码

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

    谷歌字体工程师Nicholas Zakas在JavaScript优化方面做了非常启发性的演讲（这让我在JScript中看到了一些东西）：

  • 加快您的JavaScript（YouTube视频）

    • 如何实现jQuery

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

    安装jQuery的秘诀。 。 。

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

    这一切意味着什么。 。 。

    在这里您将看到对三种不同JavaScript代码文件的引用。 第一个是为我的Visual Studio开发人员环境提供智能感知的文件。 第二个参考我的jQuery代码文件（这是你需要的，但你必须改变文件的实际地址）。 第三个是对我的jQuery UI代码文件的引用。

    代码文件的位置。 。 。

    最新的jQuery代码文件可以从jQuery主页下载，或者使用Google的一个编码库进行引用; 他们在线提供了许多这些源代码以方便访问。 您可以在Google Hosted Libraries - Developer Guide中找到这些托管代码文件的目录。

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

    实际上我没有亲眼看过它，但它显然帮助了很多萌芽的网页设计师掌握这个概念：

  • jQuery基础 - 实现jQuery（YouTube视频）

    • “.min”是什么意思？

    您可能会注意到其中一些文件的名称中包含.min 。 所有这些表明文件已被“缩小”。 这意味着代码已经以尽可能小的方式折射出来，但大多数人无法读取。 通过下载的jQuery文件，你会看到经常这样做; 他们通常会附带一个正常版本（为了您的观赏乐趣）和一个缩小版本以便更实用。

    链接地址: http://www.djcxy.com/p/265.html

    上一篇: Turning two elements visible/hidden in the same div

    下一篇: Difference between :hidden and :not(:visible) in jQuery