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

Question

我在 _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>

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

的类设置为“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>

但是实在是太丑了。有人可以告诉我一种更优雅的方法吗？

Answer 1

如果将点击事件处理程序添加到 a 组中元素，您可以轻松地将类添加到单击元素的 li并为所有 sibling 删除它，无论有多少个。这消除了对 if 语句和 attr 的需要。更新每个li .

这是一个示例:

http://jsfiddle.net/JjBgm/4/

标记:

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

jQuery:

$(document).ready(function() {

    $('#menu li a').click(function() {
        $(this).parent().addClass('selected').siblings().removeClass('selected');
    });

});

显然，您必须使用 MVC 修改此方法以满足您的需求，但这个概念应该可行。

编辑:因为您提到存在到所涉及服务器的往返，所以上述内容可能无法正常工作。在这种情况下，您可以根据所选菜单构造客户端 ID 并从那里控制类。

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

这是假设 #page1 , #page2等引用<li>元素在服务器处理后看不到生成的标记。

如果#page1指<a>标签，那么你的语句将是:

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

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