0

次のコードがあり、cssを使用して現在選択されているタブを強調表示したいと思います。

<div id="Maintabs">
  <ul class"tablist">
    <li><a href="AshukuWeb.jsp?VIEW=Summary"  target=_top>Summary</a></li>
    <li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
    <li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
 </ul>
</div>

これを行う方法はありますか？私はcssホバーがマウスがホバーされている要素を与えることを知っています、選択されたものに似たものはありますか

みんなありがとう、

はい、私は動的な処理が必要なので、あなたが言ったようにやりました。そのタブとクラスのクリックイベントをキャプチャします。cssでは、必要なスタイルをそのクラスに適用しますが、機能しません。

これが私のコードです：

javaScriptで：

  $('#summary').click(function(){
              $(this).addClass("selected");
        alert(" summary");
          });

HTMLコード：

<div id="Maintabs">
        <ul>
            <li style="width: 100px;"><a id="summary" href="AshukuWeb.jsp?VIEW=Summary"  target=_top>Summary</a></li>
            <li style="width: 100px;"><a id="advanced" href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
            <li style="width: 100px;"><a id="expert" href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
        </ul>
        </div>

CSSコード：

.selected{
    background-color:#FEE0C6;
}

私が間違っていると思いますか？

4

2 に答える 2

0

純粋な CSS を使用してタブ効果を生成する方法がわかりません。通常、現在のタブが何であるかを動的に変更するには、Javascript または jQuery が必要です。

ただし、タブ効果に Javascript または jQuery を使用している場合は、選択したタブを強調表示するクラスを追加するだけで済みます。

たとえば、これは jQuery である可能性があります。

$("#tab1").addClass("selected-tab");

そしてこれはあなたのCSSです：

.selected-tab
{
    /*Some style to highlight it and show it's the selected tab*/   
}
于 2012-08-15T21:12:12.113 に答える
0

アクティブなクラスを作りたいと思うでしょう。あなたのliに定義されたクラスをアクティブにすることによって。次に、css を使用して .active を別の色、サイズ、形状などにすることができます。

ここに例があります（最初のli）：

HTML

<div id="Maintabs">
  <ul class"tablist">
    <li class="active"><a href="AshukuWeb.jsp?VIEW=Summary"  target=_top>Summary</a></li>
    <li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
    <li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
 </ul>
</div>

これが例です（2番目のli）：

HTML

<div id="Maintabs">
  <ul class"tablist">
    <li><a href="AshukuWeb.jsp?VIEW=Summary"  target=_top>Summary</a></li>
    <li class="active"><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
    <li><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>
 </ul>
</div>

これが例です（3番目のli）：

HTML

<div id="Maintabs">   <ul class"tablist">
    <li><a href="AshukuWeb.jsp?VIEW=Summary"  target=_top>Summary</a></li>
    <li><a href="AshukuWeb.jsp?VIEW=Advanced" target=_top>Advanced</a></li>
    <li class="active"><a href="AshukuWeb.jsp?VIEW=Expert" target=_top>Expert</a></li>  
 </ul> 
</div>

CSS

#maintabs.active {background-color: #000;}
#maintabs {background-color: #ccc;}

その結果、アクティブなタブは黒 (#000) になり、非アクティブなタブは薄い灰色 (#ccc) になります。

于 2012-08-15T21:15:56.880 に答える