Как показать скрыть div javascript
для веб-сайта, который я делаю, я хочу загрузить один div и скрыть другой, а затем иметь две кнопки, которые будут переключать представления между div с помощью JavaScript.
Это мой текущий код
текущий HTML:
вторая функция, которая заменяет div2, не работает,но первая.
11 ответов
как показать или скрыть элемент:
чтобы показать или скрыть элемент, манипулируйте элементом стиле. В большинстве случаев, вы, вероятно, просто хотите изменить элемент display свойства:
кроме того, если вы все еще хотите, чтобы элемент занимал пространство (например, если вы должны были скрыть ячейку таблицы), вы можете изменить элемент visibility свойства вместо этого:
скрытие коллекции элементов:
если вы хотите скрыть коллекцию элементов, просто перебирать каждый элемент и измените элемент display to none :
отображение коллекции элементов:
большую часть времени, вы, вероятно, просто переключаясь между display: none и display: block , что означает, что после мая достаточно показать коллекцию элементов.
вы можете дополнительно указать желаемый display в качестве второго аргумента, если вы не хотите, чтобы он по умолчанию block .
альтернативно, лучший подход для отображения элемента(ов) будет заключаться в том, чтобы просто удалить встроенный display styling, чтобы вернуть его в исходное состояние. Затем проверьте вычисленное display стиль элемента чтобы определить, скрывается ли он каскадным правилом. Если да,то покажите элемент.
(если вы хотите сделать еще один шаг, вы можете даже имитировать то, что делает jQuery, и определить стиль браузера по умолчанию элемента, добавив элемент к пустому iframe (без противоречивых стилей), а затем получить вычисленный стиль. При этом вы будете знать истинный initial display собственность значение элемента, и вам не придется жестко кодировать значение, чтобы получить желаемые результаты.)
отображения:
аналогично, если вы хотите включить display элемента или коллекции элементов, вы можете просто перебирать каждый элемент и определить, является ли он видимым, проверяя вычисленное значение display собственность.
Если это видно, установите display to none , в противном случае удалить встроенный display стиль, и если это все еще скрытый, установите display до указанного значения или жестко заданного значения по умолчанию, block .
Для веб-сайта, который я делаю, я хочу загрузить один div и спрятать другой, а затем иметь две кнопки, которые будут переключать представления между div с помощью JavaScript.
Это мой текущий код
ОТВЕТЫ
Ответ 1
Как показать или скрыть элемент:
Чтобы показать или скрыть элемент, используйте элемент style style. В большинстве случаев вы, вероятно, просто хотите изменить элемент display свойство:
В качестве альтернативы, если вы все равно хотите, чтобы элемент занимал пространство (например, если бы вы скрывали ячейку таблицы), вы могли бы изменить свойство visibility вместо:
Скрытие набора элементов:
Если вы хотите скрыть набор элементов, просто перейдите по каждому элементу и измените элемент display на none :
Ответ 2
Вы также можете использовать фреймворк jQuery:
Скрыть блок Div
Чтобы показать блок Div
Ответ 3
Вы можете просто манипулировать стилем рассматриваемого div.
Ответ 4
Вы можете скрывать/показывать Div с помощью функции Js. образец ниже
Ответ 5
Использование обработчика событий в JavaScript лучше, чем атрибут onclick=»» в HTML:
jQuery может помочь вам легко манипулировать элементами DOM!
Ответ 6
Я нашел этот простой код JavaScript очень удобным!
Ответ 7
Задайте свой HTML как
И теперь установите javascript как
Ответ 8
Ответ 9
И ответ Purescript для людей, использующих галоген:
Если вы «осмотрите элемент», вы увидите что-то вроде:
но на самом деле ничего не будет отображаться на вашем экране, как ожидалось.
Ответ 10
Просто простая функция, необходимая для реализации Показать/скрыть ‘div’ с помощью JavaScript
Ответ 11
Просто установите атрибут стиля ID:
Показать скрытый div
Чтобы скрыть показанный div
Ответ 12
Я нашел этот вопрос, и недавно я реализовывал некоторые пользовательские интерфейсы, используя Vue.
js, так что это может быть хорошей альтернативой.
Сначала ваш код не скрывает target когда вы нажимаете на Просмотр профиля. Вы переопределяете target содержимого с помощью div2 .
Задача стоит, как вы поняли, следующая – скрыть div, если его содержимое пусто, и показывать, если в нем есть текст. Очень нужная вещь, тем более когда нет полного доступа к коду вашего ресурса.
Итак, мы полагаем, что у нас есть такая конструкция:
Нам нужно скрыть весь блок, в зависимости от того, есть ли у нас текст в <div или нет.
Скрываем div в случае, если он пустой на JavaScript
Для решения этой задачи на JavaScript нам потребуется следующий код:
Скрипт рекомендую вставлять перед закрывающим тегом </body>.
Скрываем div в случае, если он пустой на jQuery
Здесь есть два похожих варианта кода. Это
Этот вариант я рекомендую также вставлять перед закрывающим тегом </body>.
Для веб-сайта, которым я занимаюсь, я хочу загрузить один div и спрятать другой, а затем иметь две кнопки, которые будут переключать представления между div с помощью JavaScript.
Это мой текущий код
Вторая функция, которая заменяет div2, не работает, но первая -.
Как показать или скрыть элемент:
Чтобы показать или скрыть элемент, манипулируйте свойством стиля элемента . В большинстве случаев вы, вероятно, просто хотите изменить display свойство элемента :
В качестве альтернативы, если вы все еще хотите, чтобы элемент занимал пространство (например, если бы вы скрывали ячейку таблицы), вы могли бы вместо этого изменить visibility свойство элемента :
Сокрытие коллекции элементов:
Если вы хотите скрыть коллекцию элементов, просто переберите каждый элемент и измените его display на none :
Показ коллекции элементов:
В большинстве случаев вы, вероятно, будете просто переключаться между display: none и display: block , что означает, что при отображении коллекции элементов может быть достаточно следующего .
При желании вы можете указать желаемое display в качестве второго аргумента, если не хотите, чтобы он был установлен по умолчанию block .
В качестве альтернативы, лучший подход для показа элемента (-ов) состоит в простом удалении встроенного display стиля, чтобы вернуть его обратно в исходное состояние. Затем проверьте вычисляемый display стиль элемента, чтобы определить, скрыт ли он каскадным правилом. Если так, то покажи элемент.
(Если вы хотите сделать еще один шаг вперед, вы можете даже подражать тому, что делает jQuery, и определять стили браузера по умолчанию для элемента, добавляя элемент к пустому iframe (без конфликтующей таблицы стилей), а затем извлекать вычисленные стили. При этом вы будет знать истинное начальное display значение свойства элемента, и вам не нужно будет жестко кодировать значение, чтобы получить желаемые результаты.)
Переключение дисплея:
Аналогично, если вы хотите переключить display элемент или коллекцию элементов, вы можете просто выполнить итерацию по каждому элементу и определить, является ли он видимым, проверив вычисленное значение display свойства. Если он виден, установите display для none , в противном случае удалите встроенный display стиль, а если он все еще скрыт, установите display для указанного значения или по умолчанию жестко заданное значение block .
Показать и скрыть элемент с помощью jQuery
Главная / Показать и скрыть элемент с помощью jQuery
jQuery — это мощная библиотека Javascript, которая упрощает добавление полезных материалов Javascript на ваш веб-сайт в любых браузерах. В этом посте рассматривается, как показать и скрыть элемент с помощью jQuery, используя функции show(), hide(), toggle(), fadeIn() и fadeOut().
Пример HTML
Во всех следующих примерах используется абзац, который выглядит примерно так:
Это пример текста, который будет отображаться и скрываться.
Простое скрытие и отображение
Самый простой способ скрыть элемент с помощью jQuery — вызвать .hide(), а затем .show(), чтобы показать его снова. Это заставляет элемент мгновенно отображаться или скрываться.
Если бы у нас была пара кнопок, чтобы скрыть и показать абзац выше, они могли бы выглядеть так, хотя, конечно, вы обычно прикрепляли бы события к кнопке в функции готовности документа:
Вот приведенный выше пример в действии:
Это пример текста, который будет отображаться и скрываться.
Управление скоростью
Управляйте скоростью скрытия и отображения элемента, передавая «медленно» «нормально» или «быстро» или десятичное число, чтобы указать количество миллисекунд, чтобы анимация длилась.
Это пример текста, который будет отображаться и скрываться.
функции toggle, fadeIn и fadeOut
Теперь давайте посмотрим, как работают функции toggle, fadeIn и fadeOut. Также есть более поздний пост, в котором показано, как сначала скрыть элемент с помощью CSS, а затем отобразить его с помощью jQuery.
Пример HTML
Во всех следующих примерах используется абзац, похожий на этот:
Это пример текста, который будет отображаться и скрываться.
Переключение элемента
Ранее я рассмотрел, как отображать и скрывать элементы с помощью jQuery, используя функции show() и hide(). Однако вы также можете просто переключить элемент, чтобы он отображался, если он скрыт, и скрыт, если отображается, используйте функцию toggle(). Он также поддерживает параметр скорости, который скрывает и показывает использование.
Это пример текста, который будет отображаться и скрываться.
Постепенное появление и исчезновение
И, наконец, вы также можете постепенное появление и исчезновение. Опять же, вы можете передать параметр скорости, и я сделал это, используя «slow» ниже:
Это пример текста, который будет отображаться и скрываться.
Заключение
Это все довольно простое использование в этих двух постах с использованием этих функций; вы, вероятно, обычно не показываете и не скрываете элементы при нажатии кнопок, но это позволяет легко проиллюстрировать суть.
Обычно отображение и скрытие элементов используется при наведении курсора на элемент навигации и отображении подменю или при отображении содержимого корзины при нажатии на значок корзины на странице электронной коммерции.
Критические изменения jQuery 3.0 в hide() и show()
Show() и hide() были упрощены (ну, их внутренняя реализация), и существующий код, который вы написали, который их использует, может больше не работать.
Зачем ломать такую простую вещь?!
Только прочитав их пост, я понял, что их работа не так проста. Есть несколько пограничных случаев, на которые нет простых ответов.
Проблема №1: они не отвечают
Когда вы вызываете show() для элемента, отображаемое значение CSS вставляется прямо в атрибут style элемента.
Проблема возникает, если элемент может иметь другое отображаемое значение в зависимости от другого фактора, такого как добавление класса или вступление в силу медиа-запроса.
.child должно иметь «отображаемое» значение «блокировать». Но поскольку jQuery show() помещает отображаемое значение в атрибут style, display: inline переопределяет это значение.
В приведенной выше записи экрана разработчик хотел, чтобы div.child имело значение display: block . Однако jQuery помешал этому, когда вызов show() установил display: inline в атрибуте style элемента, связав руки разработчику.
Источники:
- https://github.com/jquery/jquery/issues/1767
- https://jsfiddle.net/jinglesthula/ZttLJ/
Проблема №2: они снижают производительность
Как это может повлиять на производительность? По сути, jQuery должен отслеживать текущее дерево CSS, что дорого обходится. Пол Айриш обнаружил, что это самое большое узкое место при загрузке визуального редактора Википедии.
Он поднял важный вопрос:
В сторону: Теперь, когда я смотрю, это магическое поведение не имеет особого смысла. Кажется, есть два пограничных случая, из-за которых jQuery наказывает производительность каждого приложения:
.
- div { display:none; } определено, и пользователь хочет переопределить его с помощью show()
- Пользователь имеет пользовательское отображаемое значение, определенное во встроенном стиле.
Стоит ли включать поддержку этих двух пограничных случаев в один из самых простых на вид API jQuery, чтобы быть самым узким местом в этом редакторе?
Источник: https://github.com/jquery/jquery.com/issues/88
В какой ситуации jQuery 3.0 нарушает работу hide() и show()?
Если у вас есть элементы в таблице стилей, для которых установлено display: none , метод .show() больше не будет переопределять это. Таким образом, самое важное правило для перехода на jQuery 3.0 заключается в следующем: не используйте таблицу стилей для установки значения по умолчанию display: none, а затем пытайтесь использовать .
show()– или любой другой метод, отображающий элементы, например .slideDown() и .fadeIn() — чтобы сделать его видимым.Проверьте следующий JSFIddle: https://jsfiddle.net/xwvzkx9y/2/
slideToggle не работает, поскольку display: none задается с помощью класса.
Поскольку JSFiddle ссылается на край jQuery (3.0), slideToggle больше не работает, поскольку элемент имеет класс «скрыть», который jQuery больше не будет переопределять. Удаление «скрыть» исправляет это, но элемент больше не скрыт по умолчанию. Замена класса «скрыть» на display: none в элементе — еще одно одобренное решение.
Хорошо. Что мне делать вместо этого?
Что ж, они собираются оставить show() и hide() , но убрали дорогостоящие вызовы, которые выполнялись в некоторых пограничных случаях. Из сообщения в блоге:
Если вам нужно, чтобы элемент был скрыт по умолчанию, лучший способ — добавить к элементу имя класса, например «скрытый», и определить этот класс для отображения: нет в таблице стилей.
Затем вы можете добавить или удалить этот класс, используя методы jQuery .addClass() и .removeClass() для управления видимостью. В качестве альтернативы вы можете вызвать обработчик .ready() .hide() для элементов перед их отображением на странице. Или, если вам действительно необходимо сохранить таблицу стилей по умолчанию, вы можете использовать .css(«display», «block») (или соответствующее отображаемое значение), чтобы переопределить таблицу стилей.Лично я считаю, что предлагать вызов hide() в обработчике ready() — плохое предложение. Это может привести к появлению нестилизованного контента, и я не думаю, что я один считаю, что FOUC выглядит непрофессионально.
Используйте [add|remove]Class()
Использование рекомендованного jQuery способа отображения и скрытия элементов.
При использовании этого метода не имеет значения, имеет ли div разное отображаемое значение для разных медиа-запросов, что дает вам возможность переключать отображение элемента, а также дает вам возможность обрабатывать особые ситуации (например, медиа-запросы).