У меня есть такой код:
function switch_tabs(obj) {
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#' + id).show();
obj.addClass("selected");
}
Функция шоу добавляет display:block
. Но я бы хотел добавить display:inline-block
вместо блока.
Ответы:
Вместо этого
show
попробуйте использовать CSS, чтобы скрыть и показать содержимое.источник
show
($("#id").show(500)
), просто добавьтеcss
к нему функцию:$("#id").show(500).css("display", "inline-block");
$('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden');
В CSS:.hidden { display: none !important }
display
вам нужно добавить класс в ваш css сdisplay:inline-block;
последующим вызовомhide()
иshow()
использованием идентификатора элемента. Это более чистый и более предсказуемый код, который легче стилизовать.hide()
js при загрузке страницы. Установка#element{display:inline-block;display:none;}
не делает. Я думаю, что самое чистое решение$('#element').fadeIn().addClass('displaytype');
- лучше, чем ответ выше, потому что вы можете установить разные.displaytype
s в css и иметь одну функцию показа в js. Смотрите мой ответ здесь: stackoverflow.com/questions/1091322/…Установка свойства CSS после использования
.show()
должна работать. Возможно, вы нацелены не на тот элемент HTML-страницы.Но если вы не используете никаких эффектов,
.show(), .hide()
почему вы не устанавливаете эти свойства CSS вручную, например:источник
Используйте css () сразу после show () или fadeIn () следующим образом:
источник
я это сделал
работает как шарм.
источник
Решение малина была бы работать для
.hide()
и.show()
методов , но не будет работать для.toggle()
метода.В зависимости от сценария, наличие класса CSS
.inline_block { display: inline-block; }
и вызова$(element).toggleClass('inline_block')
решает проблему для меня.источник
Вы можете использовать анимированный insted of show / hide
Что-то вроде этого:
источник
попробуй это:
источник
show()
этом нет смысла. Это так же, как$('#foo').css('display','inline-block');
show
опциям.Я думаю, что вы хотите и анимацию, и установить свойство отображения в конце. В этом случае вам лучше использовать
show()
обратный вызов, как показано нижеТаким образом, вы добьетесь обоих результатов.
источник
inline-block
режим только после запуска всей анимации. Это означает, что он будет « всплывать » междуblock
иinline-block
после 400 мс.источник
на самом деле jQuery просто очищает значение свойства display и не устанавливает его в block (см. внутреннюю реализацию jQuery.showHide ()) -
...
...
Обратите внимание, что вы можете переопределить $ .fn.show () / $. Fn.hide (); сохранение исходного отображения в самом элементе при сокрытии (например, в качестве атрибута или в $ .data ()); и затем применить его снова при показе.
Кроме того, использование CSS важно! вероятно, здесь не сработает - поскольку установка стиля в строке обычно сильнее любого другого правила
источник
Лучший .let это родитель
display :inline-block
или добавить родителя изdiv
того, что есть только у CSSdisplay :inline-block
.источник
Лучший способ - добавить! Важный суффикс к селектору.
Пример:
источник
!important
том , что это важно , чтобы не использовать его.