Поворот двух элементов, видимых/скрытых в одном и том же 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';"/>

Надеюсь, что это лучше выглядит.

Ответ 1

Наиболее распространенный метод для этого

Вы должны использовать jQuery, а не чистую JavaScript. Выполните следующие действия:

Создайте класс, называемый скрытым и внутри него, добавьте отображение значения стиля: 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 Demo

Как ускорить ваш код JavaScript

Хорошей практикой является создание класса для скрытия ваших элементов внутри страницы (например, "скрытый" ) и использования его для целей, подобных этому на всей странице. Переключение значения конкретных стилей CSS менее эффективно, и почти всегда рекомендуется переключать классы.

Вот очень интересная лекция от инженера-шрифта Google Николаса Закаса по оптимизации JavaScript (это открыло мне глаза на несколько вещей в JScript):

Ускорьте свой JavaScript (видео на YouTube)

Как реализовать jQuery

Чтобы использовать эти (и многие другие) методы jQuery, вы должны сначала установить jQuery в свое приложение. К сожалению, для новичков это может показаться немного подавляющим.

Секрет установки jQuery.,.

Секрет заключается в том, чтобы понять, что установка jQuery фактически не предполагает установки как таковой. Все, что должно случиться, чтобы вы могли использовать jQuery в своем приложении, - это ссылка на файл кода jQuery. Совет.. Кодовый файл jQuery легко создается путем копирования/вставки кода jQuery в текстовый файл и изменения его расширения на .js. Затем, чтобы ссылаться на код jQuery, просто поместите ссылку ссылки в свой заголовок. Вот пример одного из моих собственных заголовков веб-сайта:

Что это значит.,.

Здесь вы увидите ссылки на три разных файла кода JavaScript. Первый - это файл, который предоставляет intelli-sense мою среду разработки Visual Studio. Второй ссылается на файл кода jQuery (это тот, который вам понадобится, но вы должны, конечно, изменить фактический адрес файла). Третий - это ссылка на файл jQuery UI.

Где взять файл кода.,.

Последний файл кода jQuery можно загрузить с домашней страницы jQuery или ссылаться на одну из библиотек кодирования Google; они размещают многие из этих исходных текстов онлайн для легкого доступа. Вы можете найти каталог этих размещенных файлов кода в Google Hosted Libraries - Руководство разработчика.

Видеоуроки, иллюстрирующие приведенные выше шаги.,.

Я на самом деле не наблюдал этого сам, но, похоже, помог многим начинающим веб-дизайнерам понять эту концепцию:

Основы jQuery - реализация jQuery (видео на YouTube)

Что означает ".min"?

Вы можете заметить, что некоторые из этих файлов включают .min в именах. Все это указывает на то, что файл был "минирован". Это означает, что код был refractored таким образом, чтобы сделать его как можно меньшим, но в основном нечитаемым для людей. Вы увидите это часто с загруженными файлами jQuery; они обычно приходят с одной нормальной версией (для вашего удовольствия просмотра) и одной миниатюрной версией для более практичного использования.