Як додати display: вбудований блок у функції jQuery show ()?


158

У мене такий код:

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замість блоку.


1
Вам потрібно буде надати ще кілька деталей. Це працює для мене у швидкому тесті: jsfiddle.net/DD3Sf .
Gijs

@gijs Вибачте, що зараз працює. Я думаю, що це якась проблема кешу. Дякуємо за ваш час
Гірі

Відповіді:


209

Замість цього 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");
}

92
Це може здатися очевидним, але якщо ви все-таки хочете використовувати часовий аспект show( $("#id").show(500)), просто додайте до нього cssфункцію:$("#id").show(500).css("display", "inline-block");
BenR

2
Я б зробив це на крок далі і подбав про всі приховування / показ за допомогою класів CSS, а не jQuery. $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden'); У CSS:.hidden { display: none !important }
Джо Маффей

10
Незважаючи на те, що це прийнята відповідь, але вона не відображає те, що зазначено в документах jquery : Це приблизно еквівалентно виклику .css ("display", "block"), за винятком того, що властивість відображення відновлено до того, що було спочатку. Якщо для елемента є відображене значення вбудованого рядка, то він прихований і показаний, він ще раз відобразиться в рядку. Отже, щоб мати типовий засіб, displayвам потрібно додати клас у свій css, а display:inline-block;потім виклик hide()та show()використання ідентифікатора елемента. Це більш чистий і передбачуваний код і простіший стиль.
Абдулла Адеб

1
@AbdullahAdeeb Проблема в тому, що вам знадобиться hide()js на завантаження сторінки. Налаштування #element{display:inline-block;display:none;}не робить. Я думаю, що найчистіше рішення $('#element').fadeIn().addClass('displaytype');- краще, ніж відповідь вище, тому що ви можете встановити різні .displaytypes в css і мати одну функцію показу в js. Дивіться моя відповідь тут: stackoverflow.com/questions/1091322 / ...
Fanky

36

Налаштування властивості CSS після використання .show()має працювати. Можливо, ви орієнтуєтеся на неправильний елемент на своїй HTML-сторінці.

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

Але якщо ви не використовуєте жодних ефектів, .show(), .hide()чому б не встановити ці властивості CSS вручну, як:

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

3
Зауважте, що jquery show / hid / toggle відновлює попередні значення відображення. Тож якщо ви приховуєте це за допомогою jquery, дзвінок шоу спрацює.
Кертіс Яллоп

"Налаштування властивості CSS після використання .show () має працювати." Який сенс використання show (), якщо ви все одно збираєтесь оновити css вручну?
JSON

9

Використовуйте css () відразу після show () або fadeIn () так:

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

5

Я це зробив

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

працює як шарм.


7
Це відповідь чи підтвердження ..?
NREZ

5

Рішення Razz працювало б для методів .hide()та .show()методів, але не було б для .toggle()методу.

Залежно від сценарію, наявність класу css .inline_block { display: inline-block; }та виклику $(element).toggleClass('inline_block')вирішує проблему для мене.


2

Ви можете використовувати анімацію, яку вводити в показ / ховати

Щось на зразок цього:

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");
}

2

спробуйте це:

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

У show()цьому безглуздо. Це те саме, що$('#foo').css('display','inline-block');
Ліам

@Liam Не безглуздо. Ви можете змінити 0, щоб полегшити його або змінити, щоб отримати доступ до інших унікальних showопцій.
JSideris

2

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

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

Таким чином ви досягнете обох результатів.


Це невірно, ви переходите в inline-blockрежим лише після запуску всієї анімації. Це означає, що він "би" між blockі inline-blockпісля 400м.
Алексіс Вілке

1
<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>

0

насправді 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 ! напевно, тут не вийде - оскільки встановлення стилю встроєне зазвичай сильніше, ніж будь-яке інше правило


0

Найкраще .let це батьківський display :inline-blockабо додати батькові divте, що лише у CSS display :inline-block.


-5

Найкращий спосіб - додати важливий суфікс до селектора.

Приклад:

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

3
це не заважає .hide ()?
Каан Сорал

! важливий лише у крайніх випадках, коли іншого варіанту немає. На мій погляд, не правильний спосіб підійти до цієї проблеми, коли її можна виправити за допомогою кращого коду jQuery.
Брендон

6
Важливо пам'ятати про !importantте , що це важливо , щоб не використовувати його.
користувач1728278
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.