0

我正在尝试在选项卡中设置标题，但标题显示在背景后面。如果在这个类中#tabss .ui-tabs-nav 我设置背景：透明；然后显示我的标题，否则显示在背景后面。

代码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>
4

1 回答 1

0

将您的 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-09T17:35:13.510 回答