0

タブの CSS ルールを定義する最良の方法について疑問に思っていました。オンラインには多くの方法がありますが、最も効率的な方法で達成したかったのです。これをどのように行うのですか？私のコードはここにあります: http://jsfiddle.net/mgd5P/

HTML

<ul id="tabs">
    <li><a href="#" title="tab1">TTS</a></li>
    <li><a href="#" title="tab2">PMW</a></li>  
</ul>

<div id="content"> 
    <div id="tab1">One - content</div>
    <div id="tab2">Two - content</div>
</div>​

JS

$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        e.preventDefault();        
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });
})();​
4

1 に答える 1

3

これがタブを作成するための純粋なCSSアプローチです（csstricksでこれを学びます）

  1. タブメニューとしてラジオボタンを使用する
  2. フックを使用して:checked、選択したタブのコンテンツを表示どおりにスタイル設定します
  3. 実際のラジオボタンを非表示にし、それらのラベルをタブとしてスタイル設定します。ラベルをクリックすると、for属性で指定されたコントロールに影響するため、タブをクリックしてもラジオボタンに影響します。

これがデモンストレーションです：http：//jsfiddle.net/abwyU/

于 2012-12-01T12:46:58.717 に答える