jQuery - css aktiv

Question

enter code here Ich habe ein großes Problem mit der Jquery. Als ich in der meinem Menü in einem Link klicken, sollte es (mit gelber Farbe zum Beispiel) und die anderen Links sollte auf das Original (Beispiel: schwarz) gleich aktiv sein .Below ist mein 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; } 

auf der Seite des 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"); 
}); 

Was ich meine, wenn ich in der Registerkarte Clients klicken, sollte es mit der Klasse (.Highlight)

Wenn Sie in Registerkarte Lieferanten klicken Sie mit der sein sollte, Klasse (.Highlight aktiv) und die anderen Registerkarten mit der ursprünglichen Klasse. Ist es möglich? : ... UPGRADE: das Menü ist auf dieser Seite: 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

IDs sollte für jede Ihren Anker eindeutig sein. Ich würde vorschlagen, es basierend auf Ihrem HTML auszuwählen.

beispiels

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

Answer 2

Dies sollte es

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

Demo bei http://jsfiddle.net/gaby/KCN5K/

Answer 3

jquery tun:

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