jQuery show（）函数显示内联块。 怎么样？

我有这样的代码

function switch_tabs(obj) { $('.tab-content').hide(); $('.tabs a').removeClass("selected"); var id = obj.attr("rel"); $('#'+id).show(); obj.addClass("selected"); } 

显示function添加显示：块。 但我想添加显示：内联块，而不是块。

有人能帮我吗？ 谢谢

Answer 1

尝试使用CSS来隐藏和显示内容，而不是show 。

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

Answer 2

使用.show()应该设置CSS属性。 也许你的目标是HTML页面上的错误元素。

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

但是，如果您没有使用.show(), .hide()任何效果，为什么不手动设置这些CSS属性，如：

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

Answer 3

在show（）或fadeIn（）之后使用css（）就像这样：

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

Answer 4

我做到了

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

奇迹般有效。

Answer 5

Razz的解决scheme将为.show() .hide()和.show()方法工作，但不会为.toggle()方法工作。

根据情况，有一个css类.inline_block { display: inline-block; } .inline_block { display: inline-block; }并调用$(element).toggleClass('inline_block')为我解决了这个问题。

Answer 6

你可以使用animation显示/隐藏

像这样的东西：

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

Answer 7

尝试这个：

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

Answer 8

我想你想要animation和最后设置显示属性。 在这种情况下，您最好使用show()callback，如下所示

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

这样你就可以达到这两个结果。

Answer 9

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

Answer 10

实际上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 重要！ 可能不会在这里工作 – 因为在线设置风格通常比任何其他规则更强

Answer 11

最好的.let它的父display :inline-block或添加一个父div什么CSS只有display :inline-block 。

Answer 12

最好的方法是添加！重要的后缀到select器。

例：

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