Question

我想使用jquery'Click'事件来更改所选标签的类。第一个选项卡最初列为选中状态。当我更改标签时，我尝试进入点击事件但跳过它。它到达功能，然后跳过它。我的项目是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>

这是我的样式表：

.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'事件，并删除了该类。但是该类未添加到我当前选定的选项卡中。这是代码：

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

更新使用下面的这个jquery函数，当单击一个选项卡时，它会从所有选项卡中删除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

这对我有用。感谢Miodrag的帮助，但是jquery没有用。我在另一篇文章中找到了。我正在使用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;
}

Answer 2

您应该将您的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引用。它应该只有一个，并在第一次使用之前在任何地方引用（例如，在文档就绪函数之前）。

使用mvc4项目

2 个答案: