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-block
zamiast bloku.
Odpowiedzi:
Zamiast tego
show
spróbuj użyć CSS, aby ukryć i pokazać zawartość.źródło
show
($("#id").show(500)
), po prostu dodaj do niegocss
funkcję:$("#id").show(500).css("display", "inline-block");
$('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden');
W CSS:.hidden { display: none !important }
display
, musisz dodać klasę do swojego css, adisplay:inline-block;
następnie wywołaćhide()
ishow()
użyć identyfikatora elementu. Jest to czystszy i bardziej przewidywalny kod oraz łatwiejszy do stylizacji.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.displaytype
s w css i mieć jedną pokazującą funkcję w js. Zobacz moją odpowiedź tutaj: stackoverflow.com/questions/1091322/…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.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:źródło
Użyj css () zaraz po show () lub fadeIn () w ten sposób:
źródło
ja to zrobiłem
działa jak marzenie.
źródło
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.źródło
Możesz użyć animacji zamiast pokaż / ukryj
Coś takiego:
źródło
Spróbuj tego:
źródło
show()
tym jest bezcelowe. To jest to samo co$('#foo').css('display','inline-block');
show
opcji.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żejW ten sposób osiągniesz oba rezultaty.
źródło
inline-block
trybem dopiero po uruchomieniu całej animacji. Oznacza to, że „wyskoczy” pomiędzyblock
iinline-block
po 400 ms.źródło
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 ()) -
...
...
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
źródło
Najlepszym. Niech będzie rodzicem
display :inline-block
lub dodaj rodzicadiv
tylko z CSSdisplay :inline-block
.źródło
Najlepszym sposobem jest dodanie! Ważnego sufiksu do selektora.
Przykład:
źródło
!important
to, że jest ważne, aby nie używać.