Как показать скрыть 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 .
Как скрыть элемент div в зависимости от значения моде…9X
Вот что у меня есть на данный момент
hidden="@(Model.IsOwnedByUser||!Model.CanEdit)"
Это 9X_html5 отлично работает в Chrome, но не скрывается 9X_razor в Internet Explorer
Я также попробовал установить 9X_.cshtml видимость false, но безуспешно.
Затем я нашел 9X_asp.net-mvc другой стиль, как показано ниже
style="@(Model.IsOwnedByUser||!Model.CanEdit)?'display:none'""
Мне не удалось 9X_vbhtml заставить его работать. Каков правильный 9X_.cshtml формат, чтобы скрыть элемент с помощью синтаксиса 9X_jquery Razor?
Или я бы использовал JQuery, чтобы 9X_razor скрыть элемент. но можно ли распечатать 9X_span инструкцию jquery, которая скроет элемент 9X_asp-net-mvc при загрузке страницы?
51
S
Salonik
4
Общее количество ответов: 4
Ответ #1
Ответ на вопрос: Как скрыть элемент div в зависимости от значения модели? MVC
В приведенном ниже коде должны применяться 9X_vbhtml разные классы CSS в зависимости от значения 9X_removeclass свойства CanEdit вашей модели.
Some links
Но если это что-то 9X_asp-mvc важное, например, «Редактировать / Удалить» ссылки, вы 9X_mvc.net не должны просто прятаться, потому что люди 9X_cshtml могут обновить класс css / разметку HTML 9X_vbhtml в своем браузере и получить доступ к вашей 9X_span важной ссылке. Вместо этого вы должны просто 9X_.cshtml не отображать важные вещи в браузере.
@if(Model.CanEdit)
{
Edit/Delete link goes here
}
105
A
AMaverick
Ссылка на ответ №1
- Комментарии:
Ответ #2
Ответ на вопрос: Как скрыть элемент div в зависимости от значения модели? MVC
Попробуйте:
Some links
Используйте атрибут стиля «Display» с 9X_asp.net-mvc атрибутом модели bool, чтобы определить 9X_asp.net-mvc видимость div.
36
X
Xorcee
Ссылка на ответ №2
- Комментарии:
Ответ #3
Ответ на вопрос: Как скрыть элемент div в зависимости от значения модели? MVC
Ваш код не работает, потому что скрытый 9X_vbhtml атрибут не поддерживается в версиях IE before v11
Если 9X_asp.
net-mvc вам нужно поддерживать IE до версии 11, добавьте 9X_asp.mvc стиль CSS, который будет скрывать при наличии 9X_jquery-callback атрибута hidden:
*[hidden] { display: none; }
4
A
Ссылка на ответ №3
Ответ #4
Ответ на вопрос: Как скрыть элемент div в зависимости от значения модели? MVC
Я знаю, что вопрос конкретно в том, чтобы 9X_html скрыть div, но если вы больше ничего не 9X_html5 делаете с div (например, в JavaScript), вы 9X_asp.mvc можете просто не включать его в вывод представления 9X_jquery-callback с помощью Razor @if синтаксис.
@if (Model.IsOwnedByUser && Model.CanEdit)
{
Some Links
}
1
R
RukiSardelki
Ссылка на ответ №4
3
Рендеринг частичных представлений с использованием ajax
5
Как вызвать действие URL-адреса в MVC с помощью функции javascript?
7
Можно ли получить доступ к объекту MVC ViewBag из файла Javascript?
3
asp.
net mvc4 jquery не работает4
Отключить редактирование в сетке кендо
2
Использование Url.Action в javascript
1
MVC с Razor: как обновить частичную страницу при нажатии?
4
Как добраться до переменных модели или Viewbag в теге скрипта
2
Как использовать jquery или ajax для обновления частичного представления бритвы в c # / asp.net для проекта MVC
2
Модель доступа в javascript asp .
net mvc razor5
onclick в ASP.NET MVC razor CheckBoxFor не работает
1
Удалить amp; из строки в javascript
1
Как проверить, имеет ли свойство ViewBag значение null или не существует
2
jQuery: как перемещаться / итерировать по списку объектов
2
ASP .NET MVC 5 Запишите javascript в файл View.cshtml
2
Как отключить выпадающий список kendo ui с помощью jquery?
1
Добавить элемент в список из представления и перейти к контроллеру в MVC5
8
Использование разделов в шаблонах редактора / отображения
2
Как визуализировать HTML из Viewbag с помощью MVC3 Razor
3
Как добавить максимальную длину для TextAreaFor in View с помощью движка бритвы
1
Кнопка MVC Razor нажимает даже параметр передачи с ним
5
Как отображать закодированный HTML, декодированный в MVC 3 Razor?
2
Как связать действие формы HTML5 с методом ActionResult контроллера в ASP.
NET MVC 44
Динамические формы ASP.NET MVC
2
Razor — HTML.RAW не выводит текст
5
ASP.NET MVC получить входное значение текстового поля
6
Как создать Html.ActionLink со значком
1
Показать список из модели в бритве MVC
5
Как установить значение в поле даты HTML5 из Asp.Net MVC Razor?
1
Отключить элемент ввода с помощью бритвы
4
Добавление изображений в Html.
ActionLink5
Визуализировать строку как HTML в C# Razor
2
Как создать кнопку в HTML для ASP.NET MVC?
2
Как включить необработанный файл html в представление бритвы
4
Что означает оператор @ * в asp.net.mvc?
3
Условный атрибут HTML с использованием бритвы
2
Бритва добавить класс, если условие ложно
2
Визуализировать HTML-код бритвой
6
Помощник HTML для <input type = «file» />
7
Обслуживание favicon.
ico в ASP.NET MVC2
Как я могу добавить атрибут класса в элемент HTML, созданный помощниками HTML MVC?
5
9
MVC, на котором была нажата кнопка отправки
11
Получить текущее имя области в представлении или контроллере
4
Как получить доступ к строке запроса в представлении ASP.Net MVC?
3
Почему я получаю null вместо пустой строки при получении запроса POST из Razor View?
2
Как я могу назвать форму с помощью Html.
BeginForm()?6
Отрисовка частичного представления с помощью динамической модели в движке представлений Razor и ASP.NET MVC 3
6
Визуализация Razor ASP.NET MVC без кодирования
3
Как мне записать незакодированный Json в мое представление с помощью Razor?
net mvc4 jquery не работает
net mvc razor
NET MVC 4
ActionLink
ico в ASP.NET MVC
BeginForm()?Как скрыть и показать элементы DOM с помощью JavaScript
Существует несколько способов показать или скрыть элементы DOM в ванильном JavaScript. В этой статье мы рассмотрим два способа скрыть или отобразить элементы DOM с помощью JavaScript.
Скрытие и отображение элементов с помощью CSS
Свойство display Свойство style display используется для установки и получения типа отображения элемента в JavaScript.
Большинство элементов HTML имеют встроенный или блок тип отображения. Содержимое встроенного элемента перемещает слева и справа от него. Блочные элементы HTML отличаются тем, что они *заполняют* всю строку и не отображают содержимое по бокам.
Чтобы скрыть элемент, установите для свойства display значение none :
document.querySelector('.btn').style.display = 'none'
Чтобы показать элемент, установите для свойства display значение block (или любое другое значение, кроме нет ):
document.querySelector('.btn').style.display = 'блок'
Скрытие и отображение элементов с помощью свойства CSS
видимости Другой способ показать или скрыть элементы DOM в JavaScript — использовать свойство стиля видимость . Это похоже на приведенное выше свойство display . Однако, если вы установите display: none , он скроет весь элемент из DOM.
visibility:hidden скрывает содержимое элемента, а HTML-элемент остается в своем исходном положении и размере.
Чтобы скрыть элемент, установите для свойства visibility значение hidden :
document.querySelector('.btn').style.visibility = 'hidden'
Чтобы снова отобразить элемент, установите для свойства visibility значение visible , как показано ниже:
document.querySelector('.btn').style.visibility = 'visible'
Свойство стиля видимость только скрывает элемент, но не удаляет пространство, занимаемое элементом. Если вы также хотите удалить пробел, установите 9Дисплей 0005: нет с использованием свойства display .
Создание методов
show() и hide() элемента. Давайте воспользуемся свойством в стиле для создания вышеуказанных методов jQuery в ванильном JavaScript:
// скрыть элемент
константа скрыть = элемент => {
элемент. style.display = 'нет'
}
// показать элемент
константное шоу = элемент => {
elem.style.display = 'блок'
}
// переключаем видимость элемента
константный переключатель = элемент => {
// если элемент виден, скрыть его
если (window.getComputedStyle(elem).display !== 'none') {
скрыть (элемент)
возвращаться
}
// показываем элемент
шоу (элемент)
}
style.display = 'нет'
}
// показать элемент
константное шоу = элемент => {
elem.style.display = 'блок'
}
// переключаем видимость элемента
константный переключатель = элемент => {
// если элемент виден, скрыть его
если (window.getComputedStyle(elem).display !== 'none') {
скрыть (элемент)
возвращаться
}
// показываем элемент
шоу (элемент)
}
Теперь, чтобы скрыть или показать любой элемент DOM, используйте описанные выше методы:
// скрыть элемент
скрыть (document.querySelector ('.btn'))
// показать элемент
показать (document.querySelector ('.btn'))
// переключить видимость
переключить (document.querySelector ('.btn'))
Обратите внимание на использование метода getComputedStyle() , который мы только что изучили на днях, для проверки того, виден ли уже элемент.
Мы использовали этот метод, поскольку свойство стиля имеет дело только со встроенными стилями, заданными с помощью элемента 9.0005 атрибут стиля .
Но HTML-элемент можно скрыть с помощью встроенного элемента