css - 很简单的tab标签切换demo 有个bug
本文介绍了css - 很简单的tab标签切换demo 有个bug的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
就是点击按钮 布局会变 应该只是内容元素消失或者出现的 但是点击按钮时内容元素会向下移动一部分，就是布局会变
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.tabul li{
cursor: pointer;
}
.tabitem{
width: 100px;
height: 100px;
background: green;
display: inline-block;
margin-left: 30px;
}
#tab .tabitem div{
width: 100px;
height: 100px;
background: red;
display: inline-block;
/*display: none;*/
}
</style>
</head>
<body>
<div id="tanContainer">
<div id="tabNav">
<ul class="tabul">
<li data-tab='tab1'>标题一</li>
<li data-tab='tab2'>标题二</li>
<li data-tab='tab3'>标题三</li>
<li data-tab='tab4'>标题四</li>
<li data-tab='tab5'>标题5</li>
</ul>
</div>
<div id="tab">
<div class="tabitem">
<div id="tab1">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
<div class="tabitem">
<div id="tab2">
<ul>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
</div>
</div>
<div class="tabitem">
<div id="tab3">
<ul>
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
</div>
</div>
<div class="tabitem">
<div id="tab4">
<ul>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
</ul>
</div>
</div>
<div class="tabitem">
<div id="tab5">
<ul>
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
</ul>
</div>
</div>
</div>
</div>
<script src="jiantou/jquery-1.8.2.js"></script>
<script>
function tab(pid){
var tabs=["tab1","tab2","tab3","tab4","tab5"];
for(var i=0;i<tabs.length;i++){
if(tabs[i]==pid){
$('#'+tabs[i]).fadeIn(200)
}else{
$('#'+tabs[i]).fadeOut(200)
}
}
}
$('.tabul').on('click','li',function(){
var tabmsg=$(this).data()
tab(tabmsg.tab)
})
</script>
</body>
</html>解决方案
这不是bug，你让里面的元素由display:none变成inline-block后，他外层元素的基线变了。绿色不显示内部的时候基线时其底部，红色显示内部后，基线时其内部红色的基线。
参考zxx对规范的翻译
一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。
来源文章
这篇关于css - 很简单的tab标签切换demo 有个bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
