1

enter code herejqueryに大きな問題があります。メニューの 1 つのリンクをクリックすると、そのリンクがアクティブになり (たとえば黄色で)、他のリンクは元のリンクと同じになります (例: 黒)。以下は私の 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 がアクティブ) になり、他のタブは元のクラスになります。出来ますか？:...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-->
}
4

3 に答える 3

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 に答える
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 に答える