現在のNav Linkトラブル（jQueryブレンドを使用）

Question

私はJavascriptの初心者ですので、私に同行してください。 ：P

私は現在、Color Powered（http://colorpowered.com/blend/）のjQuery Blendプラグインを利用しているnavを持っています。ナビゲーション内のリンクの1つをクリックすると、javascript関数が実行され、jquery load関数が別のページのdivからコンテンツを取得し、現在のページにロードします。

function load(file) { 
$('#wrapper').fadeOut('slow', function() { 
     $('#container').load('/' + file + '.html #container', function() { 
      $('#wrapper').fadeIn('slow', function() { 
      $(document).ready(function(){ 
       $("#nav a").blend(); 
      }); 

      $(document).ready(function(){ 
       $("#pagenav a").blend(); 
      }); 

      Cufon('h1', { fontFamily: 'Myriad Pro Condensed', fontWeight: 'bold', color: '#ffc000', textShadow: '-1.5px 0px #783012', textTransform: 'lowercase' }); 
      Cufon.replace('#nav a', { fontFamily: 'Vegur' }); 
      Cufon.replace('#pagenav a', { fontFamily: 'Vegur' }); 
     }); 
    }); 
}); 
} 

ブレンドプラグインがやってから私を制限しているもの：。ここに私のjavascriptのコードです代わりに別のページにあなたを取る、それだけでコンテンツをロードするように

は基本的に、私はそれを作りましたナビゲーションリンクをクリックすると、ちょうど押されたナビゲーションリンクが現在のリンクであることを示すインジケータとして表示されるように背景画像が変更されます。

ここブレンドプラグインに関連するCSS、ならびに一般にNAVだ：

#nav a:link { 
    font-weight:bold; 
    text-align:center; 
    color:#000000; 
    width:120px; 
    height:100px; 
    font-size:90%; 
    font-family:Arial; 
    margin-right:0px; 
    border-left:1px white solid; 
    display:inline-block; 
    line-height:75px; 
    text-decoration:none; 
    background-image:url('img/img-nav.png'); 
    background-repeat:no-repeat; 
} 

#nav a:visited { 
    font-weight:bold; 
    text-align:center; 
    color:#000000; 
    font-size:90%; 
    font-family:Arial; 
    width:120px; 
    height:100px; 
    margin-right:0px; 
    border-left:1px white solid; 
    display:inline-block; 
    line-height:75px; 
    text-decoration:none; 
    background-image:url('img/img-nav.png'); 
    background-repeat:no-repeat; 
} 

#nav_home {background-position:0 0;} 
#nav_home:hover,#nav_home.hover { 
    background-position:0 -100px; 
} 

#nav_about {background-position:0 0;} 
#nav_about:hover,#nav_about.hover { 
    background-position:0 -100px; 
} 

#nav_services {background-position:0 0;} 
#nav_services:hover,#nav_services.hover { 
    background-position:0 -100px; 
} 

#nav_contact {background-position:0 0;} 
#nav_contact:hover,#nav_contact.hover { 
    background-position:0 -100px; 
} 

（nav_home又はnav_aboutな​​ど）特定の要素動作のバックグラウンド位置を変更するためにgetElementByIdをを使用したが、以来ブレンドプラグインは、要素（たとえば＃nav_about.hover）の上に2番目のクラスを追加し、それを非表示にします。

私が必要とするのは、クリックしたnavリンクの背景位置を変更して表示させる方法です。ブレンドプラグインは、簡単に行えません。

Answer 1

あなたはおそらく、手動で現在のアンカーのスタイルをクラスを削除/追加したい：

// JavaScript 
$('#nav a').click(function(event){ 
    $(this).addClass('current').siblings().removeClass('current'); 
    load(this.href); 
    event.preventDefault; // or return false 
}); 

// CSS 
a.current { background-position: 0 -100px; z-index: 100 } 

のz-indexがアンカーの背景画像を不明瞭にブレンドすることによって追加された要素の問題が解決する可能性があります。