0

ここでユーザーとしての最初の質問です。

とにかく、jQuery タブに関する簡単な質問がありました。UIのバージョンではなく、別のバージョンです。私がやろうとしているのは、別のナビゲーション領域からリンクをアクティブにできるようにすることですが、選択したタブを「現在」として表示することです。使用しているスクリプトは次のとおりです。

<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');

$('#tabs ul li a').click(function(){
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs div').hide();
    $(currentTab).show();
    return false;
});
$('#sitenav ul li a').click(function(){
        $('#tabs ul li').removeClass('active');
        $(this).parent('#tabs ul li a').addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
});
});
</script>

これにアクセスするセカンダリ ナビゲーションは次のとおりです。

<div id="sitenav">
    <ul>
    <li class="home"><a href="/search/">Search ISU...</a></li>
    <li><a href="#tab1" title="Faculty/Staff">Faculty/Staff</a></li>
    <li><a href="#tab2" title="Student">Student</a></li>
    <li><a href="#tab3" title="Department">Department</a></li>
    <li><a href="#tab4" title="Website">Website</a></li>
    </ul>   
</div>

美的な理由から、実際のタブ領域の元のナビゲーションは次のとおりです。

<div id="tabs">
<ul>
<li><a href="#tab1">Faculty/Staff</a></li>
<li><a href="#tab2">Student</a></li>
<li><a href="#tab3">Departments</a></li>
<li><a href="#tab4">ISU Website</a></li>
</ul>

(「タブ」div の終了タグは、ドキュメントの下部にあり、すべてのコンテンツ領域を囲んでいます。これは正常に機能します...参考までに!:))

私ができたのは、「sitenav」を実際に他の領域にリンクさせることでしたが、私の人生では、タブを強調表示して「現在」にすることはできません。確かに見落としがちな小さなものですが、もしかしたら新鮮な目で見られるかもしれません！皆さん、ありがとうございました！

編集：うわあ…ほとんど忘れてた。これが実際の動作中のテスト版です: www.indstate.edu/search/index1.htm

4

1 に答える 1

0

#tab1 をクリックすると、他のリストが強調表示されますか? 私は次のようにします：

$('#sitenav ul li a').click(function(){
    $('#tabs ul li').removeClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs ul li a[href="'+currentTab +'"]').parent().addClass('active');
    $('#tabs div').hide();
    $(currentTab).show();
    return false;
});

別のページから移動する場合、ページは最初からレンダリングされるため、最後のページでアクティブなタブまたはハッシュとして設定したものは問題になりません。アクティブなタブを選択してアクティブ化された要素を表示したい場合は、ページがロードされたときにそれを行う必要があります。したがって、その場合、デフォルトで cssにクラス#tabs divがdisplay: none;あり、どのlis にもactiveクラスがないことを確認します。次のようなものが必要です。

$(document).ready(function(){
    var currentTab;
    if(window.location.hash){
       // check if this is an existing tab
        if($('#tabs ul li a[href="'+window.location.hash+'"]').length > 0){
             currentTab = window.location.hash;
        }
    }
    if(currentTab){
       //select and show the current tab
       $('#tabs ul li a[href="'+currentTab +'"]').parent().addClass('active');
       $(currentTab).show();
    } else {
       //select and show the first tab
       $('#tabs div:first').show();
       $('#tabs ul li:first').addClass('active');  
    }
});
于 2012-04-20T12:31:22.520 に答える