如何选择在MVC动态选择的CSS类 [英] How to select a css class as selected dynamically in mvc

问题描述

我的工作mvc4项目。
我有以下 HTML code 是菜单项
当我们点击新菜单将采取 CSS类自动激活

I'm working on mvc4 project. I have following html code which is of menu items when we clicked on new menu it will take css class active automatically

    <div class="span3">
        <!-- Filter -->
        <nav id="options" class="work-nav">
            <ul id="filters" class="option-set" data-option-key="filter">
                <li><a href="#filter" data-option-value="*" class="selected">.Net</a></li>
                <li><a href="#filter" data-option-value=".javaset">Java</a></li>
                <li><a href="#filter" data-option-value=".rubyset">Ruby</a></li>
            </ul>
        </nav>
        <!-- End Filter -->

我想它转换成 Mvc4观点CSHTML 所有类型从数据库中，所以我必须用未来的foreach ，但我该如何申请类类=选择这是目前活跃菜单？

I want to convert this into Mvc4 view cshtml All Type are coming from database so i have used foreach but how do I apply class class="selected" which is currently active menu?

我想是这样

foreach(item in Model)
{
 <div class="row">
        <div class="span3">
            <!-- Filter -->
            <nav id="options" class="work-nav">
                <ul id="filters" class="option-set" data-option-key="filter">
                    <li><a href="#filter" data-option-value="*" class="selected">@item.TypeName</a></li>
                </ul>
            </nav>
            <!-- End Filter -->
        </div>
}

指导我。

推荐答案

<击>我想这有一个在项目，允许你确定它是否是某种条件当前活动之一。然后你可以使用条件运算符这样的：

I suppose that there's some condition on the item that allows you to determine if it is the currently active one. And then you could use the conditional operator like that:

@{
    var selected = item.IsCurrentItem ? " class=\"selected\"" : "";
}
<li><a href="#filter" data-option-value="*"@Html.Raw(selected)>@item.TypeName</a></li>

这个例子假设你的模型有一个 IsCurrentItem 布尔属性。如果没有，你应该用相应的条件取代它，这将确定它是否是当前的项目。

This example assumes that your model has an IsCurrentItem boolean property. If it doesn't you should replace it with the corresponding condition that will determine if it is the current item.

更新：

看来，你正试图切换在当前项目中选定类单击此项目时。你可以使用JavaScript为。

It appears that you are attempting to toggle the selected class on the current item when this item is clicked. You could use javascript for that.

例如：

$(function() {
    $('.work-nav a').click(function() {
        // remove the selected class from all anchors
        $('.row a').removeClass('selected');

        // Add the selected class to the currently clicked anchor
        $(this).addClass('selected');
    });
});

另外请注意，你已经产生破碎的标记。您已经使用＆LT; NAV ID =选项和＆LT; UL ID =过滤器 foreach循环内。这意味着，可能你可能在你的HTML页面相同的ID多个元素。这导致无效的HTML！在HTML中所有ID必须为唯一

Also note that you have produced broken markup. You have used <nav id="options" and <ul id="filters" inside a foreach loop. This means that potentially you might have more than one element with the same id in your HTML page. This results in invalid HTML! In HTML all ids must be unique.

更新2：

为了使最初选择的第一个项目在加载页面时，你可以使用下列内容：

In order to make the first item selected initially when the page loads you could use the following:

foreach(var i = 0; i < Model.Count; i++)
{
    <div class="row">
        <div class="span3">
            <!-- Filter -->
            <nav class="work-nav">
                <ul class="option-set" data-option-key="filter">
                    <li>
                        @{
                            var item = Model[i];
                            var selected = i == 0 ? " class=\"selected\"" : "";
                        }
                        <a href="#filter" data-option-value="*"@Html.Raw(selected)>@item.TypeName</a>
                    </li>
                </ul>
            </nav>
            <!-- End Filter -->
        </div>
    </div>
}

这篇关于如何选择在MVC动态选择的CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！