1

タブを強調表示するためのクロスブラウザ互換のソリューションを探しています。ページの読み込み時に最初のタブが強調表示され、他のタブをクリックすると、最初のタブの強調表示が解除され、選択したタブが強調表示されます。この機能を IE と Firefox で同時に同じように動作させることはできません。それに関する何か入力はありますか？

注: 以下のコードは機能しますが、ページ上の他のリンクをクリックすると、タブのフォーカスが失われ、現在選択されているタブが強調表示されません。

JS

$(document).ready(function () {
    activate('focusmeplease');
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click(function () {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
    });
});

function activate(link) {
    if (document.getElementById) document.getElementById(link).focus();
    else if (document.all) document.all(link).focus();
}

HTML

<div id="tabs">
    <ul>
        <li class="clas" onclick="javascript: addPlayer('tab-1','1649028604001');">
            <a href="javascript:void(0);" id="focusmeplease">First tab</a>
        </li>
        <li class="clas" onclick="javascript: addPlayer('tab-1','1651558610001');">
            <a href="javascript:void(0);">Second tab</a>
        </li>
    </ul>
    <div id="tab-1"></div>
</div>
4

2 に答える 2

0

最後に、これはブラウザ間で機能するコードです。addPlayer関数をアンカータグのonClickアクションからjQueryliクリック関数内に移動する必要がありました。

jQuery(document).ready(function(){                  
                     addPlayer('tab-1', '1649028596001');//on page load, display this.
                     jQuery('#tabs ul li:first').addClass('active');
                     jQuery('#tabs ul li').click(function () {
                              addPlayer('tab-1', playerIdArray[jQuery(this).index()]);
                              jQuery('#tabs ul li').removeClass("active");
                              jQuery(this).addClass("active");
                      });

});


<ul>

     <li class="class4" ><a href="javascript:void(0);">Bond</a></li>
     <li class="class5" ><a href="javascript:void(0);">Stock</a></li>
   </ul>
   <div id="tab-1">

   </div>
于 2012-05-29T17:04:43.773 に答える
0

イベントでは、メソッドclickを呼び出すだけです。focusそのようです：

    $(document).ready(function () {
    activate('focusmeplease');
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click(function () {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        $(this).focus(); //i've added this
    });
});

ここでこのフィドルを参照してください

于 2012-05-24T14:00:34.247 に答える