jQuery - css active

Question

enter code here私はjqueryに大きな問題があります。私は私のメニューの1つのリンクをクリックすると、それは（例えば黄色の色で）アクティブである必要があり、他のリンクは、元（例：黒）と同じである必要があり.Belowは私のCSSです：

.graphite .menuBar {font: bold 12px Arial, sans-serif; border-top: 1px solid #111; border-right: 0px solid #111; border-left: 1px solid #111; display:table-cell;} 
.graphite .menuBar a {padding: 8px 15px 8px 15px; background: #0C0C0C url(images/bg_black.png) repeat-x 0 -1px; text-decoration:none; display: block; color: #ddd; border-bottom: 1px solid #222; border-top: 1px solid #777; position: relative;} 
.graphite .menuBar div {background: #0078AE;} 
.graphite .menuBar a:hover {background: #006599; color: #fff;} 
.graphite .menuBar .highlight { background:#006599; color: #fff; } 

jqueryの側で

：私は何を意味

$('div.menuBar > a').click().addClass(""); //To the original tabs 
$('a[id="Clients"]').each(function() { //when click in tab Clients 
    $(this).addClass("highlight"); 
}); 
$('a[id="supplier"]').each(function() { //when click in tab supplier 
    $(this).addClass("highlight"); 
}); 

クライアント]タブでIをクリックしたときにタブのサプライヤーにクリックした場合、それはクラス（.Highlight）

であるべきであることであるべきクラス（。ハイライトアクティブ）、その他のタブは元のクラスと同じです。 可能ですか？ ：... UPGRADE： をメニューには、このページにある：Header.cshtml

@model MWA.ViewModels.HeaderViewModel 
@if (Request.IsAuthenticated && (Model.message == "" || Model.message == null)){ 
using (Html.BeginForm("updateLanguage", "Header", FormMethod.Post, new { id = "headerForm" })){ 
<input type="hidden" id="hdOrga" name="hdOrga" value="@Model.Orga.orgaID" /> 
<input type="hidden" id="hdUtzID" name="hdUtzID" value="@Model.User.userID" /> 
<div class="div-table-header"> 
    <div class="div-table-header-row"> 
     <div class="div-table-header-col" style="width:5%; padding-left:10px">@MWA.Resources.Shared._Header.Orga: </div> 
     <div class="div-table-header-col" style="width:40%"><strong>@Model.Orga.orgaName</strong></div> 
     <div class="div-table-header-col-right" style="width:55%">@MWA.Resources.Shared._LogOnPartial.Heading, <strong>@Html.ActionLink(@User.Identity.Name, "SignOut", "Account") </strong></div> 
     <!--div class="div-table-header-col-right" style="width:10%;">@Html.ActionLink("SignOut", "SignOut", "Account")</div-->  
    </div> 
    <div class="div-table-header-row"> 
     <div class="div-table-header-col" style="padding-left:10px">@MWA.Resources.Shared._Header.Comp: </div> 
@{ if (Model.Companies.Count() == 1) 
    { 
     <div class="div-table-header-col"><strong>@Model.Companies.FirstOrDefault().companyName</strong></div> 
    } 
else 
    { 
     <div class="div-table-header-col"> @Html.DropDownListFor(x => x.selectedCompany, new SelectList(Model.Companies, "companyID", "companyName")) </div> 
    } 
} 
     <div class="div-table-header-col-right">@MWA.Resources.Shared._LogOnPartial.Lang: @Html.DropDownListFor(x => x.selectedLanguage, new SelectList(Model.Languages, "lang", "langName", Model.selectedLanguage))</div> 
    </div> 
</div> 
<div class="div-table-header"> 
    <div class="div-table-header-row-menu"> 
     <div class="div-table-header-col-menu"> 
      <div class="graphite"> 
       @foreach (var app in Model.Appl) 
    { 
       <div class="menuBar">@Html.ActionLink((string)app.applicationName, "Index", (string)app.controler, new { app = app.applicationID }, new { id = (string)app.applicationName })</div> 
    } 
      </div> 
     </div> 
    </div> 
</div> 
} <!--Html.BeginForm--> 
} 

Answer 1

IDがあなたのアンカーのそれぞれに対して一意である必要があります。私はあなたのhtmlに基づいてそれを選択することをお勧めします。

は、例えば

$('.menubar a').click(function (e) { //when click in tab Clients 
    e.preventDefault(); 
    $('.menubar a').removeClass("highlight"); 
    $(this).toggleClass("highlight");  
}); 

Answer 2

これはやるべきこと

$('div.menuBar').on('click','.menuBar > a', function(){ 
    $(this).addClass('highlight').siblings('a').removeClass('highlight'); 
}) 

デモhttp://jsfiddle.net/gaby/KCN5K/

Answer 3

jqueryの時：

$('div.menuBar > a').click(function(){ 
    $('.highlight').each(function(){ $(this).removeClass('highlight') }); 
    $(this).addClass('highlight'); 
});