1

enter code here我对 jquery 有很大的问题。当我单击菜单中的一个链接时，它应该处于活动状态（例如黄色），其他链接应该与原始链接相同（例如：黑色）。下面是我的 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");
});

我的意思是当我单击客户端选项卡时，它应该与类 (.Highlight)

如果您单击选项卡供应商应该与类（.Highlight 活动）和原始类的其他选项卡。可能吗？:...升级：菜单在这个页面上：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-->
}
4

3 回答 3

1

这应该这样做

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

演示在http://jsfiddle.net/gaby/KCN5K/

于 2012-04-09T16:21:47.110 回答
1

jQuery：

$('div.menuBar > a').click(function(){
   $('.highlight').each(function(){ $(this).removeClass('highlight') });
   $(this).addClass('highlight');
});
于 2012-04-09T16:30:47.380 回答
1

每个锚的 ID 应该是唯一的。我建议根据您的 html 选择它。

例如

$('.menubar a').click(function (e) { //when click in tab Clients
    e.preventDefault();
    $('.menubar a').removeClass("highlight");
    $(this).toggleClass("highlight");    
});
于 2012-04-09T16:15:44.207 回答