我想創建一個類似於堆棧溢出配置文件頁面的頁面的選項卡式視圖,如下圖所示。使用css和javascript頁面的選項卡式視圖
我已經能夠創建一個標籤式界面,但我無法刪除選項卡下邊境,因爲邊境實際上已經給下面的股利。如果我將邊框放在標籤上,那麼我無法將邊框延伸到沒有標籤的區域。
這裏是我使用
<div id="centerDiv">
<div id="centeredMenu">
<ul class="tabs">
<li><a class="active" href="#">Questions</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Posts</a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<div class="favContentBox">
<!-- The content goes here -->
</div>
<div class="favContentBox">
<!-- The content goes here -->
</div>
<div class="favContentBox">
<!-- The content goes here -->
</div>
的HTML我有多達favContentBox
,因爲是ul
li
元素。和JavaScript是
$(document).ready(function(){
var currentTab = 0;
function openTab(clickedTab) {
var thisTab = $(".tabs a").index(clickedTab);
$(".tabs li a").removeClass("active");
$(".tabs li a:eq("+thisTab+")").addClass("active");
$(".favContentBox").hide();
$(".favContentBox:eq("+thisTab+")").show();
currentTab = thisTab;
}
$(".tabs li a").click(function() {
openTab($(this));
return false;
});
$(".tabs li a:eq("+currentTab+")").click()
});
和css
是這樣
.favContentBox
{
border:1px solid #808080;
padding-left:20px;
padding-right:20px;
min-height: 500px;
}
.tabs
{
margin:0 0 0 0;
padding:0 0 0 0;
left:50%;
text-align:center;
clear:left;
position:relative;
float:left;
}
.tabs li
{
list-style: none;
float: left;
right:50%;
display:block;
position:relative;
}
.tabs li a
{
display: block;
color:black;
font-weight: bold;
text-align: center;
text-decoration: none;
width:100px;
padding: 5px 0 5px 0;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
border-right: 1px solid #808080;
margin-left:20px;
background-color:#F0F0F0;
}
你可以添加一些標記嗎? – Undefined 2012-01-06 10:07:26
您可以將白色邊框應用於選項卡,然後使用-1邊距將其拉到下面的div上嗎? – dougajmcdonald 2012-01-06 10:08:47
@dougajmcdonald:我嘗試了你的建議,但沒有幫助。 – Sachin 2012-01-06 10:14:45