在 mvc4 项目中使用 jquery 函数突出显示选定的选项卡

Question

我想使用 jquery 'click' 事件来更改所选选项卡的 class。第一个选项卡最初列为选中状态。当我更改选项卡时，我尝试进入点击事件但它被跳过了。它到达函数然后跳过它。我的项目是 MVC4，我的 jquery 库是 1.11.3.
这是我的标记：

<header>
<div class="content-wrapper">            
    <p class="site-title">
        <img src="~/Images/logo.png" alt="" />
    </p>                        
    <nav>
        <ul id="menu" class="maintablist">
            <li class="selected">@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("About", "About", "Home")</li>
            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
    </nav>              
</div>
</header>

这是我的 jquery 函数：

<script src="~/Scripts/jquery-1.11.3.js"></script>
<script>
    $("#menu li").click(function () {
        $("#menu li").removeClass("selected");
        $(this).addClass("selected");
    });
</script>

这是我的风格sheet东西：

.maintablist {
    list-style:none;
    height: 2em;
    padding: 0;
    margin: 0;
    border: none;
}

.maintablist li {
    float: left;
    margin-right: 0.13em;
}

.maintablist li a {
    display:block;
    padding:0 1em;
    text-decoration:none;
    border:0.06em solid #000;
    border-bottom:0;
    font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
    color:#000;
    background-color:#ccc;

    /* CSS 3 elements */
    -webkit-border-top-right-radius:0.50em;
    -webkit-border-top-left-radius:0.50em;
    -moz-border-radius-topright:0.50em;
    -moz-border-radius-topleft:0.50em;
    border-top-right-radius:0.50em;
    border-top-left-radius:0.50em;
}

.maintablist li a:hover {
    background:#b5dbb6; 
    color:#fff;
    text-decoration:none;
}

.maintablist li.selected a {
    background-color: #b5dbb6;
    color: #fff;
}

为什么不识别点击事件？我想在客户端执行此操作，而不必去 HomeController 执行此操作。谢谢。

更新从 'ready' 函数中删除了 'click' 事件，并删除了 class。但是 class 没有添加到我当前选择的选项卡中。这是代码：

<script>
 $(".maintablist li").removeClass("selected");
 $(this).addClass("selected");
</script>

更新使用下面的 jquery 函数，当单击一个选项卡时，它会从所有选项卡中删除 class 属性。然后显示单击的选项卡，初始选项卡具有 'selected' 颜色。不应为所有选项卡定义 class 属性，但会以某种方式将 class 属性重新应用于初始选项卡，但仍会显示所选选项卡。

$(document).ready(function () {
    $("#mainmenu li").click(function () {
        $("#mainmenu li").removeClass("selected").removeAttr("class");
    });   
});

更新我只发布了我认为需要的信息。但下面是文件中的代码，_Layout.cshtml

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title OnCall Schedule Tool</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link rel="stylesheet" href="~/Content/jquery-ui.css">
    <link rel='stylesheet' href='~/Content/fullcalendar.css' />
    <link rel='stylesheet' href='~/Content/spectrum.css'>
    <script src="~/Scripts/jquery-1.11.3.js"></script>
    <script src='~/Scripts/jquery.min.js'></script>
    <script src="~/Scripts/jquery-ui.js"></script>
    <script src='~/Scripts/moment.min.js'></script>
    <script src='~/Scripts/fullcalendar.js'></script>
    <script src="~/Scripts/spectrum.js"></script>
    <script src="~/Scripts/knockout-2.2.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#mainmenu li").click(function () {
                $("#mainmenu li").removeClass("selected").removeAttr("class");
            });   
        });              
    </script>
</head>
<body>
    <header>
        <div class="content-wrapper">            
            <p>
                <img src="~/Images/logo.png" alt="" />
            </p>                                     
            <nav>
                <ul id="mainmenu" class="maintablist">
                    <li class="selected">@Html.ActionLink("View OnCall Schedule", "ViewSchedule", "Home")</li>
                    <li>@Html.ActionLink("Edit OnCall Schedule", "EditSchedule", "Home")</li>
                    <li>@Html.ActionLink("Admin OnCall Application", "Admin", "Home")</li>
                </ul>
            </nav>                    
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content">
            @RenderBody()
        </section>
    </div> 
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

Answer 1

您应该将 javascript 代码放入 $(document).ready() 函数中：

<script>
    $(document).ready(function() {
        <!-- put your javascript code here -->
    });
</script>

更新

它就在我们眼前：您还需要通过返回 false.

来防止锚元素的默认行为导致页面刷新

$("#mainmenu li").click(function () {
    $(this).siblings().removeClass("selected");
    $(this).addClass("selected");
    return false;
});

此外，我不得不提到你使用了三个对 jQuery 的引用。它应该只有一个，并且在第一次使用之前的任何地方都被引用（例如，在文档就绪函数之前）。

Answer 2

这对我有用。感谢 Miodrag 的帮助，但 jquery 无效。我在另一个 post 上找到了。我正在使用 MVC4，它使用那些属性，没有 jquery。在每个页面上设置每个页面上 ViewBag 的 PageName 属性，如下所示：

文件顶部 EditSchedule.cshtml

@{
    ViewBag.PageName = "EditSchedule";
}

文件顶部 ViewSchedule.cshtml

@{
    ViewBag.PageName = "ViewSchedule";
}

文件顶部 Admin.cshtml

@{
    ViewBag.PageName = "Admin";
}

在_Layout.cshtml

<nav>
    <ul id="mainmenu" class="maintablist">
        <li class="@((ViewBag.PageName == "ViewSchedule") ? "selected" : "")">@Html.ActionLink("View OnCall Schedule", "ViewSchedule", "Home")</li>
        <li class="@((ViewBag.PageName == "EditSchedule") ? "selected" : "")">@Html.ActionLink("Edit OnCall Schedule", "EditSchedule", "Home")</li>
        <li class="@((ViewBag.PageName == "Admin") ? "selected" : "")">@Html.ActionLink("Admin OnCall Application", "Admin", "Home")</li>
    </ul>
</nav>

在定义选项卡外观的 Style.css 文件中：

.maintablist {
    list-style:none;
    height: 2em;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 0;
}

.maintablist li {
    float: left;
    margin-right: 0.13em;
}

.maintablist li a {
    display:block;
    padding:0 1em;
    text-decoration:none;
    border:0.06em solid #000;
    border-bottom:0;
    font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
    color:#000;
    background-color:#ccc;

    /* CSS 3 elements */
    -webkit-border-top-right-radius:0.50em;
    -webkit-border-top-left-radius:0.50em;
    -moz-border-radius-topright:0.50em;
    -moz-border-radius-topleft:0.50em;
    border-top-right-radius:0.50em;
    border-top-left-radius:0.50em;
}

.maintablist li a:hover {
    background: #b5dbb6;
    color:#fff;
    text-decoration:none;
}

.maintablist li.selected a{
    background-color: #b5dbb6;
    color: #fff;
    border-bottom: 0;
}

在 mvc4 项目中使用 jquery 函数突出显示选定的选项卡

Highlight selected tab using jquery function in mvc4 project

jquery

tabs