Я бы хотел использовать событие jquery click для изменения класса выбранной вкладки. Первая вкладка изначально отображается как выбранная. Когда я меняю вкладки, я пытаюсь войти в событие click, но он пропущен. Он достигает функции, а затем просто пропускает ее. Мой проект MVC4, а моя библиотека jquery - 1.11.3.
Это моя разметка:Выделите выбранную вкладку, используя функцию jquery в проекте mvc4
<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, чтобы это сделать. Спасибо.
UPDATE Удалено событие 'click' из функции 'ready' и класс удален. Но класс не добавлен в текущую выбранную вкладку. Это код:
<script>
$(".maintablist li").removeClass("selected");
$(this).addClass("selected");
</script>
UPDATE С помощью этой функции JQuery ниже, когда вкладка щелкнул удаляет атрибут класса из всех вкладок. Затем отображается вкладка с щелчком, начальная вкладка имеет «выбранную» раскраску. Все вкладки не должны иметь атрибут класса, но как-то атрибут класса повторно применяется к исходной вкладке, но отображается выбранная вкладка.
$(document).ready(function() {
$("#mainmenu li").click(function() {
$("#mainmenu li").removeClass("selected").removeAttr("class");
});
});
UPDATE я только разместил информацию, которую я считаю, что нужно. Но ниже код в файле, _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>
Работает гладко. +1 – LogicalDesk