在同一个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
希望这是更好看的。
实现这一目标的最常用方法
你应该使用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样式的值效率较低，并且几乎总是建议您切换类。
以下是Google字体结束工程师Nicholas Zakas关于JavaScript优化的非常有启发性的演讲（这让我开始关注JScript中的一些事情）：
- 加速您的JavaScript （YouTubevideo）
如何实现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中找到这些托管代码文件的目录。
video教程说明了上述步骤。 。 。
我自己并没有真正看过它，但它显然帮助了很多崭露头角的网页设计师掌握了这个概念：
- jQuery基础 – 实现jQuery （YouTubevideo）
“.min”是什么意思？
您可能会注意到其中一些文件的名称中包含.min 。 所有这些表明该文件已被“缩小”。 这意味着代码的重新分割方式使其尽可能小，但对人类来说几乎是不可读的。 你会看到这经常使用下载的jQuery文件完成; 它们通常会带有一个普通版本（为了您的观看乐趣）和一个缩小版本以便更实用。