-2

我在同一个 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';"/>

希望这个更好看。

4

1 回答 1

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

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

如何加速你的 JavaScript 代码

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

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

如何实现 jQuery

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

安装 jQuery 的秘诀。. .

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

截图

这一切意味着什么。. .

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

从哪里获得代码文件。. .

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

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

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

“.min”是什么意思？

您可能会注意到其中一些文件的名称中包含.min。这一切都表明该文件已被“缩小”。这意味着代码已经以一种尽可能小的方式进行了重构，但大多数情况下对人类来说是不可读的。您会经常看到下载的 jQuery 文件完成此操作；它们通常会附带一个普通版本（为了您的观看乐趣）和一个缩小版本以便更实际使用。

于 2013-07-18T14:39:00.850 回答