2011-01-03 18 views
0

タブのようなメニューのナビゲーションの並べ替えを作成しようとしていますが、垂直ボタンを使用しています。ページを開始すると、最初のliクラスが削除され、それ以外の場合は、私のコンテンツdivが表示されます..jqueryの追加/削除クラスの問題

最初のリンクは常にページ開始時にアクティブでなければなりません。

<script type="text/javascript"> 
$(document).ready(function() { 

    var tabContainers = $('div.pages > div'); 

    $('div.sidemenu ul.list a').click(function() { 
     tabContainers.hide().filter(this.hash).show(); 

     $('div.sidemenu ul.list li').removeClass('active'); 
     $(this).addClass('active'); 

     return false; 
    }).filter(':first').click(); 


}); 
</script> 
<div class="sidemenu"> 
    <ul class="list"> 
<li class="active"><a href="#first">Login & Password</a></li> 
<li><a href="#second">Contact Details</a></li> 
<li><a href="#third">Company & Branch Details</a></li> 
<li><a href="#forth">Address Details</a></li> 
    </ul> 
</div> 

<div class="pages"> 
    <div id="first"> 
    CONTENT 1 
    </div> 
    <div id="second"> 
    CONTENT 2 
    </div> 
    <div id="third"> 
    CONTENT 3 
    </div> 
    <div id="forth"> 
    CONTENT 4 
    </div> 
</div> 

ない私がここで行方不明ですかわから..私はちょうどコーヒーの私の最初のカップにまだ目が覚めたとたぶんそのcuase ..;)

+0

jQueryのカスタムコンポーネント/スクリプトを作成する場合は、この記事をお読みください。 http://docs.jquery.com/Plugins/Authoring初心者の方にとっては少し威圧的かもしれませんが、本当に強力です。 –

答えて

3

あなたは<a>要素にクラスを追加しています、親の<li>要素から削除します。

$(this).addClass('active'); // "this" is the <a> that received the event 

    // This removes "active" from the <li> 
$('div.sidemenu ul.list li').removeClass('active'); 

<li>がクラスを持っているため、あなたが意図したように見えます。

$(this).parent().addClass('active'); 

をそれとも、気にしないなら、私は少しでDOM APIを混合:だから、代わりにこれを行うだろう今リフィルを取りに行く

$(this.parentNode).addClass('active'); 

! ; O)

+0

オクラホマ...私はコーヒーの不足でそれを責めなければならない!笑ありがとう!私はDOMを多用していません。 – Dennis

+0

@Dennis:私が学んだことの多くは、[quirksmode](http://www.quirksmode.org/compatibility.html)をブラウズして試してみることから来ています。これは、ブラウザの互換性の素晴らしい概要を提供します。 – user113716

3

あなたは私はあなたがLI-要素に追加したいと思いますので、どちらかあなたが

$(this).parent().addClass('active'); 
を追加A-要素に

$(this).addClass('active'); 

を "アクティブ" クラスを追加

またはLI要素のonclickを登録してください

関連する問題