(jQuery) Переключить стиль div "display: none" на "display: inline"

У меня есть 2 divs, которые и я хочу иметь возможность переключаться между ними при нажатии кнопки (в настоящее время используется .toggle();)

В div, отображаемом на странице, находится div1. Этот div имеет стиль "display: inline". Мой другой div (div2) начинается со стиля "display: none".

Когда div1 переключается на div2, я хочу, чтобы div2 имел стиль "display: inline". Как это сделать?

EDIT: Это работает:

$(function(){
 $('#button').click(function(){
 $('#div1').toggleClass('hide');
if ($('#div2').is('.hidden')) {
 $('#div2').removeClass('hidden');
 $('#div2').addClass('show');
 }
 else{
 $('#div2').addClass('hidden');
 $('#div2').removeClass('show');
 }
 });
});
3 ответа

Я использовал бы .toggleClass() в качестве переключателей между display: inline; и display: block;

Создайте скрытый и встроенный класс и просто переключите их.


Используя обычный JavaScript, вы можете использовать:

document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'inline';


Вот простой способ сделать это:

  • Для html у нас есть простая кнопка для вызова функции toggleFunction, которая при необходимости добавляет и удаляет классы отображения в наши элементы Div.

    <button onclick="toggleFunction()">Click to toggle</button>

    Now showing "Div 1"

    Now showing "Div 2"
  • Мы установим свойства отображения по умолчанию Div 1 и Div 2 на "inline" и "none" соответственно, чтобы по умолчанию:

    • Отображается Div 1 и
    • Div 2 скрыт.

Вот css для этого:

#div1 {
 display: inline;
 color:blue;
}
#div2 {
 display: none;
 color:red;
}
.display-none {
 display: none !important;
}
.display-inline {
 display: inline !important;
}
  1. Наконец, мы будем использовать JQuery для добавления и удаления классов "display-none" и "display-inline" в Div 1 и Div 2 соответственно, вызывая нашу функцию toggleFunction при нажатии кнопки.

Вот JQuery для этого:

function toggleFunction() {
 $("#div1").toggleClass("display-none"); 
 $("#div2").toggleClass("display-inline"); 
 }

Вы можете попробовать его здесь: http://codepen.io/anon/pen/vEbXwG

licensed under cc by-sa 3.0 with attribution.