Как добавить display: inline-block в функцию jQuery show ()?

У меня есть такой код:

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, чтобы скрыть и показать содержимое.

function switch_tabs(obj) {
    $('.tab-content').css('display', 'none'); // you could still use `.hide()` here
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#' + id).css('display', 'inline-block');
    obj.addClass("selected");
}

Установка свойства CSS после использования .show()должна работать. Возможно, вы нацелены не на тот элемент HTML-страницы.

 $('#foo').css('display', 'inline-block');

Но если вы не используете никаких эффектов, .show(), .hide()почему вы не устанавливаете эти свойства CSS вручную, например:

$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');

Используйте css () сразу после show () или fadeIn () следующим образом:

$('div.className').fadeIn().css('display', 'inline-block');

я это сделал

function showPanels()  {
    $('.panels').show("slow");
    $('.panels').css('display','inline-block');
}

работает как шарм.

Решение малина была бы работать для .hide()и .show()методов , но не будет работать для .toggle()метода.

В зависимости от сценария, наличие класса CSS .inline_block { display: inline-block; }и вызова $(element).toggleClass('inline_block')решает проблему для меня.

Вы можете использовать анимированный insted of show / hide

Что-то вроде этого:

function switch_tabs(obj)
{
    $('.tab-content').animate({opacity:0},3000);
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).animate({opacity:1},3000);
    obj.addClass("selected");
}

попробуй это:

$('#foo').show(0).css('display','inline-block');

Я думаю, что вы хотите и анимацию, и установить свойство отображения в конце. В этом случае вам лучше использовать show()обратный вызов, как показано ниже

$("#my_obj").show(400,function() {
    $("#my_obj").css("display","inline-block")
}) ;

Таким образом, вы добьетесь обоих результатов.

<style>
.demo-ele{display:inline-block}
</style>

<div class="demo-ele" style="display:none">...</div>

<script>
$(".demo-ele").show(1000);//hide first, show with inline-block
<script>

на самом деле jQuery просто очищает значение свойства display и не устанавливает его в block (см. внутреннюю реализацию jQuery.showHide ()) -

   function showHide(elements, show) {
    var display, elem, hidden,

...

         if (show) {
            // Reset the inline display of this element to learn if it is
            // being hidden by cascaded rules or not
            if (!values[index] && display === "none") {
                elem.style.display = "";
            }

...

        if (!show || elem.style.display === "none" || elem.style.display === "") {
            elem.style.display = show ? values[index] || "" : "none";
        }
    }

Обратите внимание, что вы можете переопределить $ .fn.show () / $. Fn.hide (); сохранение исходного отображения в самом элементе при сокрытии (например, в качестве атрибута или в $ .data ()); и затем применить его снова при показе.

Кроме того, использование CSS важно! вероятно, здесь не сработает - поскольку установка стиля в строке обычно сильнее любого другого правила

Лучший .let это родитель display :inline-blockили добавить родителя из divтого, что есть только у CSS display :inline-block.

Лучший способ - добавить! Важный суффикс к селектору.

Пример:

 #selector{
     display: inline-block !important;                   
}