【发布时间】：2015-09-24 15:36:59
【问题描述】：
我想使用 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 函数，当单击一个选项卡时，它会从所有选项卡中删除类属性。然后显示单击的选项卡，初始选项卡具有“选定”颜色。所有选项卡都不应定义类属性，但会以某种方式将类属性重新应用到初始选项卡，但仍会显示所选选项卡。
$(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>
【问题讨论】：