0

タブにアクセスしたときに別の背景色を適用したいタブ ページがあります。どうやってやるの？

コードは次のとおりです。 HTML:

<ul class="tabs">
       <li><a href="#tab1">Tab One</a></li>
        <li><a href="#tab2">Tab Two</a></li>
        <li><a href="#tab3">Tab Three</a></li>
</ul>
<div class="pane">
    <div id="tab1">
        <p>This is first tab</p>
    </div>
    <div id="tab2" style="display:none;">
        <p>This is second tab</p>
    </div>
    <div id="tab3" style="display:none;">
        <p>This is third tab</p>
    </div>
</div>

CSS:

ul.tabs>li {float: left; padding: 10px; background-color: lightgray;
          margin-right:5px; border-radius:10px 10px 0 0;
      }

ul.tabs li a{text-decoration:none;}

ul.tabs li a:visited{color:red;}

ul.tabs li:visited{background:lime;}

p{padding:40px;}

jQuery:

$(document).ready(function() {
    $("ul.tabs a").click(function() {
        $(".pane div").hide();
        $($(this).attr("href")).show();
    });
})

フィドル: http://jsfiddle.net/uFALn/63/

4

4 に答える 4

3

このコードを試してください:

$(document).ready(function() {
    $("ul.tabs a").click(function() {
        $(".pane div").hide();
        $(this).parent().addClass('visited')
        $($(this).attr("href")).show();
    });
})​

そしてそれのためのCSS：

ul.tabs li.visited{
background:lime;
}

デモ

:visited参照のみに適用されます。同時に、上記のコードは、ページのリロード後に機能しません (リンクの場合と同様)。さらに、document.ready でリンクの色をテストし、対応するクラスをLIsに設定できます。

別のオプション: s ではなくリンク付きのフォーム タブ ヘッダーLI(主な CSS の変更):

ul.tabs>li {
     float: left;

}
ul.tabs>li a {
    padding: 10px;
          display:block;
          background-color: lightgray;
          margin-right:5px;
          border-radius:10px 10px 0 0;
      }

デモ

于 2012-10-01T08:58:29.450 に答える
2

visited疑似クラスは s では機能しません。liそれらはリンクではなく、li 要素を「訪問」する方法がないからです。

したがって、できることは、as をに設定しdisplay:block;て背景色を指定することです。

これは、ページの変更/更新後でも機能します。

新しい CSS:

ul.tabs>li {
    float: left;
    margin-right:5px;
}

ul.tabs li a { /* padding, background and border-radius goes here now */
    display:block;
    padding: 10px;
    background-color: lightgray;
    text-decoration:none;
    border-radius:10px 10px 0 0;
}

ul.tabs li a:visited{color:red;}

ul.tabs li a:visited { /* li a:visited instead of li:visited */
    background:lime;
}

p{padding:40​px;}

デモ

于 2012-10-01T08:57:29.507 に答える
2

HTML 要素にはセレクターliがありません。:visitedすべての CSS をアンカーに適用する必要があります。

をに変更しul.tabs>li、ul.tabs a背景を設定します

ul.tabs li a:visited {
    color:red;
    background: lime;
}

作業コードについては、このフィドルを参照してください。

于 2012-10-01T08:58:20.287 に答える
1

HTML

<ul class="tabs">
   <li class="active"><a href="#tab1">Tab One</a></li>
    <li><a href="#tab2">Tab Two</a></li>
    <li><a href="#tab3">Tab Three</a></li>
</ul>
<div class="pane">
<div id="tab1">
    <p>This is first tab</p>
</div>
<div id="tab2" style="display:none;">
    <p>This is second tab</p>
</div>
<div id="tab3" style="display:none;">
    <p>This is third tab</p>
</div>
</div>

CSS

ul.tabs>li {
  float: left;
  padding: 10px;

  margin-right:5px;
  border-radius:10px 10px 0 0;
}
li{
background: lightgray;
}
ul.tabs li a{
text-decoration:none;
}

ul.tabs li a:visited{
color:red;
}

ul.tabs li:visited{
background:lime;
}

p{
padding:40px;
}

.active{
    background:blue;
}
​

JQUERY

$(document).ready(function() {
    $("ul.tabs a").click(function() {
        $("ul.tabs li").removeClass('active');
        $(this).parent().addClass('active');
        $(".pane div").hide();
        $($(this).attr("href")).show();
    });
})​

デモ

于 2012-10-01T08:59:24.257 に答える