Превращение двух элементов, видимых / скрытых в одном и том же элементе

Question

У меня проблема с включением одного элемента, а другого - в том же самом 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';"/>

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

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

И вот демонстрация (я пытался использовать большую часть вашего кода, поэтому некоторые изображения отсутствуют):

• JsFiddle Demo

---

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

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

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

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

---

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

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

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

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

Что все это значит. , ,

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

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

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

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

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

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

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

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