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

2023年10月17日 350次阅读

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

单击其中一个操作链接时,我想设置< li>的类.其中包含“选定”和其他的类< li>元素“”.

这有效：

    <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>

但它非常难看.有人能告诉我一个更优雅的方式吗？

最佳答案 如果将click事件处理程序添加到元素组中,则可以轻松地将该类添加到单击元素的li中,并为所有兄弟节点删除它,无论其中有多少.这消除了对每个li的if语句和attr更新的需要.

这是一个示例：

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');

当然未经测试.要点是动态构建选择器,然后根据需要使用兄弟和父选择器来清除类.它更清洁.

点赞