我试图让我的 jQuery 选项卡一直穿过顶部并在左侧和右侧与边缘对齐，我尝试做固定宽度但它似乎不想那样合作.有谁知道如何做到这一点？此外，当您单击选项卡时它会一直跳来跳去，我看到这是因为它们通过将选项卡向下移动到边框上来隐藏内容的边框...是否可以在不移动选项卡本身的情况下将选项卡连接到内容并创造跳跃？
http://jsfiddle.net/fun6faos/2/
<style>
.tabs-all {
width: 830px;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.etabs {
margin: 0;
padding: 0;
width: 100%;
}
.tab-container .panel-container {
background: #fff;
border: solid #c2c2c2 1px;
padding: 10px;
}
.panel-container {
margin-bottom: 10px;
}
.tab1 {
width: 209px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab2 {
width: 233px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab3 {
width: 124px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab4 {
width: 207px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tab1.active, .tab2.active, .tab3.active, .tab4.active {
background: #fff;
padding-top: 6px;
position: relative;
top: 1px;
border-color: #c2c2c2;
border-top: 5px solid #70bf47;
border-right: solid 1px #c2c2c2;
border-left: solid 1px #c2c2c2;
}
.tab1 a, .tab2 a, .tab3 a, .tab4 a {
font-size: 15px;
line-height: 2em;
display: block;
padding: 0 10px;
outline: none;
text-decoration: none;
color: #464646;
font-weight: 600;
}
.tab1 a:hover, .tab2 a:hover, .tab3 a:hover, .tab4 a:hover {
text-decoration: none;
}
.tab1 a.active, .tab2 a.active, .tab3 a.active, .tab4 a.active {
text-decoration: none;
color: #464646;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs();
});
</script>
</head>
<body>
<div class="tabs-all">
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab1'><a href="#tabs1">What is Community Solar?</a></li>
<li class='tab2'><a href="#tabs2">Why Clean Energy Collective?</a></li>
<li class='tab3'><a href="#tabs3">How it Works?</a></li>
<li class='tab4'><a href="#tabs4">Community Solar Benefits</a></li>
</ul>
<div class='panel-container'>
<div id="tabs1">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs2">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs3">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs4">
<h2>TITLE</h2>
<p>Information</p>
</div>
</div>
</div>
</div>
最佳答案
您需要将边距归零。将此添加到您的 CSS:
body {
margin:0px;
}
关于javascript - 如何让我的选项卡 100% 位于顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25411508/