jQueryスクリプトで冗長コードを削除する

Question

jQuery .load機能を利用して、AJAX経由でデータを読み込むためのページを設定しました。

タブバーのリンクをクリックして新しいファイルを読み込む際に、jQueryを使用して、選択したタブの色を黄色に設定しています。私は.toggleClass関数を使って、li要素のクラスをアクティブにしました。その結果、黄色になりますが、サイコロではないので、毎回CSSをリセットすることにしました。

どのように冗長なコードを削除するか、スクリプトをオーバーホールしますか？

いずれにしても、jQueryスクリプトがあります。いかなる援助も歓迎されるでしょう！

$(document).ready(function() { 
    $('a#catalog').click(function() { 
     $("#nav ul li a").css("color","white"); 
     $(this).css("color","yellow"); 
     $("#content").load("files/catalog.html"); 
    }); 
    $('a#request').click(function() { 
     $("#nav ul li a").css("color","white"); 
     $(this).css("color","yellow");  
     $("#content").load("files/request.html"); 
    }); 
    $('a#publisher').click(function() { 
     $("#nav ul li a").css("color","white"); 
     $(this).css("color","yellow"); 
     $("#content").load("files/publisher.html"); 
     }); 
    $('a#incoming').click(function() { 
     $("#nav ul li a").css("color","white"); 
     $(this).css("color","yellow"); 
     $("#content").load("files/incoming.html"); 
    }); 
    $('a#finished').click(function() { 
     $("#nav ul li a").css("color","white"); 
     $(this).css("color","yellow"); 
     $("#content").load("files/finished.html"); 
    }); 
    $('a#shipments').click(function() { 
     $("#nav ul li a").css("color","white"); 
     $(this).css("color","yellow"); 
     $("#content").load("files/shipments.html"); 
    }); 
}); 

とナビゲーションバー：

<div class="bar" id="nav"> 
      <ul class="left"> 
       <li><a href="#" id="request">Request Search</a></li> 
       <li><a href="#" id="catalog">Catalog Search</a></li>   
       <li><a href="#" id="publisher">Request from Publisher</a></li> 
       <li><a href="#" id="incoming">Catalog Incoming Files</a></li> 
       <li><a href="#" id="finished">Send Finished Files</a></li>  
       <li><a href="#" id="shipments">Shipments</a></li> 
      </ul> 
     </div> 

そして最後に、ではなく、少なくともを、CSS：事前に

.bar { margin: 5px 0; position: relative; height: 20px; background-color: #515e6c; } 
.bar a { color: #fff; } 
.bar ul li a:hover { color: yellow; } 
/* .bar ul li.active { color: yellow; } */ 
ul { margin: .3em 0; } 
ul li { display: inline; padding: 0 5px; border-right: 1px solid #fff; } 
ul li:last-child { border-right: none; } 

ありがとう！

Answer 1

これにそれを実行する必要があります、限り、あなたの選択したルールとして

$(document).ready(function() { 
    var $links = $('#nav ul li a'); 
    $links.click(function() { 
     $links.css("color","white"); 
     $(this).css("color","yellow"); 
     $("#content").load("files/" + $(this).attr('id') + ".html");  
    }); 
}); 

このように変更します。

.bar ul li a.active { color: yellow; } 

そして、あなたはこれにクリック機能の最初の2行を変更することができます：

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

スタイルは、もともとinste <li>自体に適用されていました<a>の広告です。