jQueryのタブ - 現在のタブを別のナビゲーションからハイライト表示

Question

ユーザーとしての最初の質問ですので、このnoobで簡単にどうぞ！

とにかく、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の終了タグは、一番下にありますすべてのコンテンツ領域を取り囲む文書の、うまくいく...ちょうどfyi！ :)）

私ができることは、実際に他の領域にリンクするために "sitenav"を得ることでしたが、私の人生のために、私はハイライトして "現在"になることができません。確かにそれは私が見落としている小さなものですが、おそらく新鮮な目に見えるかもしれません！皆さん、ありがとうございました！

編集：jeez ...ほとんど忘れてしまった。 www.indstate.edu/search/index1.htm

Answer 1

したがって、＃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;であり、liのどれもactiveクラスがデフォルトでないことを確認します。 あなたはこのような何か必要があると思います：私は「タブ」の＃tab1のが強調表示されるだろう、「sitenav」に＃tab1のをクリックした場合、私は...はい、この権利を読んでいる場合

$(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'); 
    } 
});