UI標籤設置標題

我試圖在標籤中設置標題，但標題顯示在背景後面。如果在這個類#tabss .ui-tabs-nav我設置背景：透明;然後顯示我的標題，否則顯示在背景後面。UI標籤設置標題

CSS代碼：

#tabss { 
padding: 0px; 
background: none; 
border-width: 0px; 
position: relative; 
width:100%; 
height:100%; 
zoom:1; 
} 

#tabss .ui-tabs-nav { 
background: url("img/top-bg-column.gif") repeat; 
border:0px; 
//background: transparent; 
text-align: right; 
zoom:2; 
height:30px; 
border-radius: 4px 4px 0px 0px; 
} 
#tabss .ui-tabs-nav li { display: inline-block; float: none; border-color:#dfdfdf; position: relative; top: 1px; margin: 1px 0 0 0; white-space: nowrap; } 
#tabss .ui-tabs-nav li a { color:#222; background: url("img/top-bg-column-hover.gif"); font-weight:normal; padding:2px 10px 4px 10px; } 
#tabss .ui-tabs-nav li a:hover { color:#666; background:#f7f7f7; } 
#tabss .ui-tabs-nav li.ui-tabs-selected a { background:#f7f7f7; color:#666; } 
#tabss .ui-tabs-nav li.ui-tabs-selected { top:3px; } 
#tabss .ui-tab-title { position: absolute; left: 0px; top: 0px; font-size:18px; color:red; zoom:3; } 
#tabss .ui-tabs-panel { 
background-color:#f7f7f7; 
border-color:#dfdfdf; 
border-width: 0px 1px 1px 1px; 
-moz-border-radius: 0px 0px 4px 4px; 
-webkit-border-radius: 0px 0px 4px 4px; 
border-radius: 0px 0px 4px 4px; 
padding: 10px; 
}

代碼的html：

<div id="tabss" class="tabs"> 
    <p class="ui-tab-title">My Title</p> 
    <ul> 
    <li><a href="#tabs-1">Tab 1</a></li>--> 
    <li><a href="#tabs-2">Tab 2</a></li> 
    </ul> 
    <div id="tabs-1"> 
    // data 
    </div> 
<div id="tabs-2"> 
    // data 
    </div> 
</div>

來源

2013-01-09 Dinasty Love

能否請您爲此創建的jsfiddle？問題現在還不清楚。 – Wolf

請檢查此鏈接http://s7.postimage.org/xat8olbuj/image.png，在類.ui-tab-title我更改頂部：-10px;看我的文字標題在哪裏。 –

如果你想「我的標題」div帶來前臺，請只分配高Z指數值，並檢查.. –

你的HTML更改爲以下。刪除<p class="ui-tab-title">My Title</p>

<div id="tabss" class="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Tab 1</a></li>--> 
    <li><a href="#tabs-2">Tab 2</a></li> 
    </ul> 
    <div id="tabs-1"> 
    // data 
    </div> 
<div id="tabs-2"> 
    // data 
    </div> 
</div>

然後在創建UI選項卡後添加以下代碼。

$('#tabss').prepend('<p class="ui-tab-title">My Title</p>');

**如果這不是你想要的，那麼請更新的詳細信息

來源

2013-01-09 17:35:13 Wolf

標題仍然顯示我背後的背景像這個鏈接http://s7.postimage.org/xat8olbuj/image。 png –

如果我改變這個類#tabss .ui-tabs-nav {background：none; }然後顯示我的標題，背景有什麼問題？ –

你能展示一個現場樣本嗎？我無法猜測你的問題。我的解決方案是與jQuery選項卡插件（使用默認格式） – Wolf

UI標籤設置標題

回答

相關問題