0

タブにタイトルを設定しようとしているのですが、タイトルが背景に隠れて表示されてしまいます。このクラス #tabss .ui-tabs-nav で background: transparent; を設定した場合 次に、背景の後ろに表示されるタイトルを表示します。

コード 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 に答える