Jak dodać display: inline-block w funkcji show () jQuery?

158

Mam taki kod:

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");

    var id = obj.attr("rel");
    $('#' + id).show();
    obj.addClass("selected");
}

Funkcja show dodaje display:block. Ale chciałbym dodać display:inline-blockzamiast bloku.

Giri
źródło
1
Musisz podać więcej szczegółów. U mnie działa w szybkim teście: jsfiddle.net/DD3Sf .
Gijs,
@gijs Przepraszamy, teraz działa. Myślę, że to jakiś problem z pamięcią podręczną. Dzięki za
poświęcony

Odpowiedzi:

209

Zamiast tego showspróbuj użyć CSS, aby ukryć i pokazać zawartość.

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");
}
Razz
źródło
92
Może się to wydawać oczywiste, ale jeśli nadal chcesz wykorzystać aspekt czasowy funkcji show( $("#id").show(500)), po prostu dodaj do niego cssfunkcję:$("#id").show(500).css("display", "inline-block");
BenR
2
Poszedłbym o krok dalej i zająłbym się całym ukrywaniem / wyświetlaniem za pomocą klas CSS, a nie jQuery. $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden'); W CSS:.hidden { display: none !important }
Joe Maffei
10
Mimo że jest to akceptowana odpowiedź, ale nie odzwierciedla tego, co zostało powiedziane w dokumentacji jquery : jest to mniej więcej równoważne wywołaniu .css ("display", "block"), z wyjątkiem tego, że właściwość display jest przywracana do stanu, w jakim była początkowo. Jeśli element ma wyświetlaną wartość inline, a następnie jest ukryty i pokazany, zostanie ponownie wyświetlony w tekście. Aby mieć wartość domyślną display, musisz dodać klasę do swojego css, a display:inline-block;następnie wywołać hide()i show()użyć identyfikatora elementu. Jest to czystszy i bardziej przewidywalny kod oraz łatwiejszy do stylizacji.
Abdullah Adeeb
1
@AbdullahAdeeb problem polega na tym, że hide()przy ładowaniu strony trzeba by było użyć js. Ustawienie #element{display:inline-block;display:none;}nie działa. Myślę, że najczystszym rozwiązaniem jest $('#element').fadeIn().addClass('displaytype');- lepsze niż odpowiedź powyżej, ponieważ możesz ustawić różne .displaytypes w css i mieć jedną pokazującą funkcję w js. Zobacz moją odpowiedź tutaj: stackoverflow.com/questions/1091322/…
Fanky
36

Ustawienie właściwości CSS po użyciu .show()powinno działać. Być może kierujesz na niewłaściwy element na swojej stronie HTML.

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

Ale jeśli nie używasz żadnych efektów, .show(), .hide()dlaczego nie ustawisz tych właściwości CSS ręcznie, na przykład:

$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');
projekty mas
źródło
3
Zauważ, że jquery show / hide / toggle przywraca poprzednie wyświetlane wartości. Więc jeśli ukryjesz to za pomocą jquery, call show zadziała.
Curtis Yallop
„Ustawienie właściwości CSS po użyciu .show () powinno działać”. Jaki jest sens używania show (), jeśli mimo wszystko zamierzasz ręcznie zaktualizować css?
JSON
9

Użyj css () zaraz po show () lub fadeIn () w ten sposób:

$('div.className').fadeIn().css('display', 'inline-block');
Yura Loginov
źródło
5

ja to zrobiłem

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

działa jak marzenie.

user2204545
źródło
7
Czy to odpowiedź czy potwierdzenie…?
NREZ
5

Rozwiązanie Razza zadziałałoby w przypadku metod .hide()i .show(), ale nie zadziałałoby w przypadku .toggle()metody.

W zależności od scenariusza posiadanie klasy css .inline_block { display: inline-block; }i wywołanie $(element).toggleClass('inline_block')rozwiązuje problem za mnie.

user968903
źródło
2

Możesz użyć animacji zamiast pokaż / ukryj

Coś takiego:

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");
}
Narek
źródło
2

Spróbuj tego:

$('#foo').show(0).css('display','inline-block');
Carlos
źródło
W show()tym jest bezcelowe. To jest to samo co$('#foo').css('display','inline-block');
Liam
@Liam Nie ma sensu. Możesz zmienić 0, aby ułatwić, lub zmodyfikować to, aby uzyskać dostęp do innych unikalnych showopcji.
JSideris
2

Myślę, że chcesz zarówno animację, jak i ustawić właściwość wyświetlania na końcu. W takim przypadku lepiej użyj funkcji show()oddzwaniania, jak pokazano poniżej

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

W ten sposób osiągniesz oba rezultaty.

Reza
źródło
To nie jest poprawne, skończyłbyś z inline-blocktrybem dopiero po uruchomieniu całej animacji. Oznacza to, że „wyskoczy” pomiędzy blocki inline-blockpo 400 ms.
Alexis Wilke
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>
Jon
źródło
0

w rzeczywistości jQuery po prostu czyści wartość właściwości 'display' i nie ustawia jej na 'block' (zobacz wewnętrzną implementację 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";
        }
    }

Pamiętaj, że możesz przesłonić $ .fn.show () / $. Fn.hide (); przechowywanie oryginalnego wyświetlania w samym elemencie podczas ukrycia (np. jako atrybut lub w $ .data ()); a następnie zastosuj go ponownie podczas wyświetlania.

Ważne jest również używanie CSS ! prawdopodobnie nie zadziała tutaj - ponieważ ustawienie stylu w linii jest zwykle silniejsze niż jakakolwiek inna reguła

yarg
źródło
0

Najlepszym. Niech będzie rodzicem display :inline-blocklub dodaj rodzica divtylko z CSS display :inline-block.

wuball
źródło
-5

Najlepszym sposobem jest dodanie! Ważnego sufiksu do selektora.

Przykład:

 #selector{
     display: inline-block !important;                   
}
yuiwer
źródło
3
czy to nie zapobiega .hide ()?
Kaan Soral
! ważne jest konieczne tylko w skrajnych przypadkach, gdy nie ma innej opcji. Moim zdaniem nie jest to właściwy sposób podejścia do tego problemu, skoro można go naprawić lepszym kodem jQuery.
Brandon
6
Ważne jest, aby pamiętać o !importantto, że jest ważne, aby nie używać.
user1728278