blocks|key|437469|text|尝试使用show来隐藏和显示内容，而不是CSS。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|437470|function+switch_tabs(obj)+{
++++$('.tab-content').css('display',+'none');+//+you+could+still+use+`.hide()`+here
++++$('.tabs+a').removeClass("selected");
++++var+id+=+obj.attr("rel");

++++$('#'+%2B+id).css('display',+'inline-block');
++++obj.addClass("selected");
}|code-block|syntax|javascript|437471|entityMap^0|4|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Instead of <code>show</code>, try to use CSS to hide and show the content.

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

blocks|key|651923|text|在使用.show()之后设置CSS属性应该是可行的。也许你在你的HTML页面上定位了错误的元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|651924|+$('#foo').css('display',+'inline-block');|code-block|syntax|javascript|651925|但是如果您没有使用.show(),+.hide()的任何效果，为什么不手动设置这些CSS属性，如下所示：|651926|$('#foo').css('display','none');+
$('#foo').css('display','inline-block');|651927|entityMap^0|3|7|0|0|9|G|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

Setting the CSS property after you have used <code>.show()</code> should work. Maybe you are targeting the wrong element on your HTML page.

<pre><code> $('#foo').css('display', 'inline-block');
</code></pre>

But if you are not using any effects of <code>.show(), .hide()</code> why don't you set those CSS properties manually like:

<pre><code>$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');
</code></pre>

blocks|key|437750|text|在show()或fadeIn()之后使用css()，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437751|$('div.className').fadeIn().css('display',+'inline-block');|code-block|syntax|javascript|437752|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use css() just after show() or fadeIn() like this:

<pre><code>$('div.className').fadeIn().css('display', 'inline-block');
</code></pre>

blocks|key|652003|text|Razz的解决方案适用于.hide()和.show()方法，但不适用于.toggle()方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|652004|根据场景的不同，使用css类.inline_block+{+display:+inline-block;+}并调用$(element).toggleClass('inline_block')为我解决了这个问题。|652005|entityMap^0|C|7|K|7|Z|9|0|E|14|1L|12|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$]]

Razz's solution would work for the <code>.hide()</code> and <code>.show()</code> methods but would not work for the <code>.toggle()</code> method.

Depending upon the scenario, having a css class <code>.inline_block { display: inline-block; }</code> and calling <code>$(element).toggleClass('inline_block')</code> solves the problem for me.

blocks|key|437710|text|我就这么做了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437711|function+showPanels()++{
++++$('.panels').show("slow");
++++$('.panels').css('display','inline-block');
}|code-block|syntax|javascript|437712|就像一种护身符。|437713|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I did that

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

works like a charm.

blocks|key|651732|text|你可以使用animate的show/hide|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|651733|如下所示：|651734|function+switch_tabs(obj)
{
++++$('.tab-content').animate({opacity:0},3000);
++++$('.tabs+a').removeClass("selected");
++++var+id+=+obj.attr("rel");

++++$('#'%2Bid).animate({opacity:1},3000);
++++obj.addClass("selected");
}|code-block|syntax|javascript|651735|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/animate/^0|5|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

You can use <a href="http://api.jquery.com/animate/" rel="nofollow">animate</a> insted of show/hide

Something like this:

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

blocks|key|437696|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437697|$('#foo').show(0).css('display','inline-block');|code-block|syntax|javascript|437698|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try this:

<pre><code>$('#foo').show(0).css('display','inline-block');
</code></pre>

blocks|key|652166|text|我想你想要动画，并在最后设置display属性。在这种情况下，您最好使用show()回调，如下所示|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|652167|$("#my_obj").show(400,function()+{
++++$("#my_obj").css("display","inline-block")
})+;|code-block|syntax|javascript|652168|这样你就可以同时获得两种结果了。|652169|entityMap^0|10|6|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

I think you want both the animation and to set the display property at the end. In that case you better use <code>show()</code> callback as shown below

<pre class="lang-js prettyprint-override"><code>$("#my_obj").show(400,function() {
 $("#my_obj").css("display","inline-block")
}) ;
</code></pre>

This way you will achieve both the results.

blocks|key|652184|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|652185|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;style&gt;
.demo-ele{display:inline-block}
&lt;/style&gt;

&lt;div class="demo-ele" style="display:none"&gt;...&lt;/div&gt;

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

blocks|key|652179|text|最好的.let是它的父display+:inline-block，或者添加一个父div，CSS只有display+:inline-block。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|652180|entityMap^0|B|L|14|3|1D|L|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

The best .let it's parent <code>display :inline-block</code> or add a parent <code>div</code> what CSS only have <code>display :inline-block</code>.

blocks|key|437663|text|最好的方法是在选择器中添加!important后缀。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437664|示例：|437665|+#selector{
+++++display:+inline-block+!important;+++++++++++++++++++
}|code-block|syntax|javascript|437666|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Best way is to add !important suffix to the selector .

Example:

<pre><code> #selector{
 display: inline-block !important; 
}
</code></pre>

I have some code like this:

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

 var id = obj.attr("rel");
 $('#' + id).show();
 obj.addClass("selected");
}
</code></pre>

The show function adds <code>display:block</code>. But I would like to add <code>display:inline-block</code> instead of block.

How to add display:inline-block in a jQuery show() function?

我有一些这样的代码：function switch_tabs(obj) {    $('.tab-content').hide();    $('.tabs a').removeClass("selected");    var id = obj.attr("rel");    $('#' + id).show();    obj.addClass("selected");}show函数添加dis

问如何在jQuery show()函数中添加display:inline-block？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery show()函数中添加display:inline-block？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery show()函数中添加display:inline-block？
EN