Jquery 如何在_Layout.cshtml中动态设置列表项的样式

我在_Layout.cshtml中有此菜单：

<td class="MenuStructure">
    <ul id="menu">
        <li>@Html.ActionLink("First Page", "Page1Action", "Main")</li>
        <li>@Html.ActionLink("Second Page", "Page2Action", "Main")</li>
        <li>@Html.ActionLink("Third Page", "Page3Action", "Second")</li>
    </ul>
</td>

@ActionLink（“第一页”、“第1页操作”、“主要”）
@ActionLink（“第二页”、“第二页操作”、“主要”）
@ActionLink（“第三页”、“第三页”、“第二页”）

单击其中一个操作链接时，我想将包含它的

的类设置为“selected”，将其他

元素的类设置为“”

这项工作：

    <script type="text/javascript">
        $(document).ready(function () {
        var selMenu = '@ViewBag.SelectedMenu';
            if (selMenu == "page1") {
                $("#page1").attr('class', 'selected');
                $("#page2").attr('class', '');
                $("#page3").attr('class', '');
            }
            if (selMenu == "page2") {
                $("#page1").attr('class', '');
                $("#page2").attr('class', 'selected');
                $("#page3").attr('class', '');
            }
        });
    </script>

$（文档）.ready（函数（）{
var selMenu='@ViewBag.SelectedMenu'；
如果（选择菜单==“第1页”）{
$（“#page1”）.attr（'class'，'selected'）；
$（“#第2页”）.attr（'类'，''）；
$（“#第3页”）.attr（'类'，''）；
}
如果（选择菜单==“第2页”）{
$（“#page1”）.attr（'类'，''）；
$（“#page2”）.attr（'class'，'selected'）；
$（“#第3页”）.attr（'类'，''）；
}
});

---

但是它非常丑陋。有人能告诉我一种更优雅的方法吗？

如果您向

a

元素组添加一个单击事件处理程序，那么您可以轻松地将该类添加到单击元素的

li

中，并为所有同级移除它，而不管有多少同级。这样就不需要为每个

li

更新if语句和

attr

以下是一个示例：

标记：

<ul id="menu">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

显然，您必须根据MVC的需要修改这种方法，但是这个概念应该是可行的

编辑：因为您提到要往返到涉及的服务器，上述操作可能无法正常工作。在这种情况下，您可以基于所选菜单构造clientside id并从中控制类

$(document).ready(function () {
    var selMenu = '@ViewBag.SelectedMenu';
    $("#" + selMenu).addClass('selected').siblings().removeClass('selected');
});

这是假设

#page1

，

#page2

等。在服务器处理后，请参阅

元素，而不查看生成的标记

如果

#page1

引用了

标记，那么您的语句将是：

$("#" + selMenu).parent().addClass('selected').siblings().removeClass('selected');

---

当然没有经过测试。要点是动态构造选择器，然后根据需要使用同级选择器和父选择器来清除类。它更干净。

我假设这是您网站的主要导航，即使您没有执行确切的操作，您也希望保持顶部菜单处于“选中”状态（例如，链接转到列表，然后转到“编辑”页面等）

有两种方法可以做到这一点。一种是在viewbag中放置一个属性，然后在渲染时在_layout.cshtml文件中检查该属性

// in controller Action method
ViewBag.SelectedMenu = "first"
// in view
<li class="@((ViewBag.SelectedMenu == "first") ? "selected-class" : "")">first link</li>

然后，在

\u Layout.cshtml

文件中：

<mvcSiteMapNode title="Home" controller="Home" action="Index">
<mvcSiteMapNode title="Get a car" controller="Cars" action="Buy"/>
    <mvcSiteMapNode title="Reports" controller="Report" action="AllReports">
      <mvcSiteMapNode title="" controller="Report" action="ViewMPG"/>
    </mvcSiteMapNode>
</mvcSiteMapNode>

<td class="MenuStructure">
    <!-- one level menu starting at top (home), including the "home" link -->
    @Html.MvcSiteMap().Menu(0, true, true, 1)
</td>

---

我的li元素中的@Html.ActionLink会导致回发（不确定这是否是MVC3中的正确术语），因此这是可行的，但仅在页面刷新之前的短暂时刻，并且没有链接具有“selected”类。@KennyZ ah yes没有考虑往返行程……我将更新Interesting。但是Sitemap解决方案如何处理在所选li节点上设置类并将其从兄弟节点中删除的问题呢？对不起，我忘记了一部分！对我来说，中国时间已经很晚了。我会加上它。编辑模板是如此的标准以至于我的大脑都没有受到影响。不过，至少现在ViewBag的想法已经成为了选定的答案。最后，我认为最好使用站点地图的方式，而不是手动确保每个操作（以及错误、帖子等）都设置了ViewBag属性。我也这么想，但每个控制器都有一行代码。

<td class="MenuStructure">
    <!-- one level menu starting at top (home), including the "home" link -->
    @Html.MvcSiteMap().Menu(0, true, true, 1)
</td>

<ul id="menu">
    @foreach (var node in Model.Nodes)
    {
        var show = node.IsInCurrentPath && (!node.IsRootNode || node.IsCurrentNode);
        var cls = show ?  "selected" : ""; 
        <li class="@cls">@Html.DisplayFor(m => node)</li>
    }
</ul>