在同一个div中显示/隐藏两个元素 [英] Turning two elements visible/hidden in the same div

问题描述

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

CSS

 ＃test1 {
宽度：804px;保证金左：自动;保证金右：自动;高度：250像素;向左飘浮;溢出：隐藏;显示：无; 
} 
 
＃test2 {
宽度：804px;保证金左：自动;保证金右：自动;高度：250像素;向左飘浮;溢出：隐藏;显示：块; 
} 
 
 .mydiv {
 
} 
 
 #test {
宽度：804px;保证金左：自动;保证金右：自动;高度：250像素;向左飘浮;溢出：隐藏; 
} 
 
 #labor {
 float：left;宽度：38px;高度：125px; 
} 
 
 #odc {
 float：left;宽度：32PX;高度：125px; 
} 
  

HTML

 < div id =test> 
< div class =mydivid =test1> 
< script src =../../ Dashboard / Charts / FusionCharts.jstype =text / javascript>< / script> 
< div id =line3ChartContainerstyle =display：normal> 
< asp：Literal ID =Literal9Visible =truerunat =server>< / asp：Literal>< / div> 
< / div> 
< div class =mydivid =test2> 
< script src =../../ Dashboard / Charts / FusionCharts.jstype =text / javascript>< / script> 
< div id =popChartContainerstyle =display：normal> 
< asp：Literal ID =Literal3Visible =truerunat =server>< / asp：Literal>< / div> 
< / div> 
< / div> 
 
< img src =../../ images / labortab.pngid =laboronmousedown =document.test1.visibility ='false'; document.test2.visibility = '真';/> 
< img src =../../ images / odctab.pngid =odconmousedown =document.test1.visibility ='true'; document.line3ChartDiv.visibility ='false'; /> 
  

希望这样看起来更好看。

解决方案

实现此目的最常用的方法

你应该使用jQuery而不是纯粹的的文件我的Visual Studio开发人员环境。 第二个引用我的jQuery代码文件（这是你需要的文件，但是你必须更改文件的实际地址）。 第三个是对我的 jQuery UI 代码文件的引用。

从何处获取代码文件。 。 。

可以下载最新的jQuery代码文件来自jQuery主页或使用Google的一个编码库引用;他们在线托管了许多这些源代码，以便于访问。您可以在 Google Hosted Libraries - 开发人员指南中找到这些托管代码文件的目录 。

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

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

• jQuery Basics - 实现jQuery （YouTube视频）

。min是什么意思？

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

I am having a problem turning one element on and the other off in the same div. It seems I create an object that is supposed to do this, and when I click on it, it hides the entire div instead of turning one element on and one off. What else do I need to add to make this work?

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';"/>

Hope this is better looking.

解决方案

The most common method for accomplishing this

You should be using jQuery and not pure JavaScript. Follow these steps:

1. Create a class called hidden and inside it, add the style value display:none
2. Use toggleClass or addClass/removeClass on the element to change visibility.

Here is the code example of the 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');
    });
});

And here is a demonstration (I tried to use most of your code, so there are some missing images):

• JsFiddle Demo

---

How to speed up your JavaScript code

A good practice is to create a class for hiding your elements within a page (for example, 'hidden') and use it for purposes like this throughout the page. Toggling the value of specific CSS styles is less efficient, and it is almost always recommended that you toggle classes instead.

Here is a very enlightening lecture from Google font-end engineer Nicholas Zakas on JavaScript optimization (this opened my eyes on a few things in JScript):

• Speed Up Your JavaScript (YouTube video)

---

How to implement jQuery

In order to use this (and countless other) jQuery methods, you must first install jQuery into your application. Unfortunately for beginners, that can sound little overwhelming.

The secret to installing jQuery . . .

The secret is to realize that installing jQuery doesn't actually involve an installation per se. All that needs to happen for you to be able to use jQuery in your application, is to reference the jQuery code file. Tip: The jQuery code file is easily created by copy/pasting the jQuery code into a text file, and changing its file extension to .js. Then, to reference the jQuery code, just place a reference link in your header. Here is an example of one of my own website headers:

What it all means . . .

Here you will see references to three different JavaScript code files. The first is a file that provides intelli-sense to my Visual Studio developer environment. The second references my jQuery code file (this is the one you'll need, but you have to change the actual address of the file of course). The third is a reference to my jQuery UI code file.

Where to get the code file . . .

The latest jQuery code file can be downloaded from the jQuery home page or referenced using one of Google's coding libraries; they host many of these source code online for easy access. You can find a directory of these hosted code files in Google Hosted Libraries - Developer Guide.

Video tutorial illustrating the steps above . . .

I haven't actually watched it myself, but it has apparently helped a lot of budding web designers grasp this concept:

• jQuery Basics - Implementing jQuery (YouTube video)

What does the ".min" mean?

You may notice that some of these files include .min in their names. All this indicates is that the file has been "minified". This means that the code has been refractored in a way that makes it as small as possible, but mostly unreadable to humans. You'll see this done often with downloaded jQuery files; they'll usually come with one normal version (for your viewing pleasure) and one minified version for more practical use.

这篇关于在同一个div中显示/隐藏两个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！