Как сделать элемент навигационной панели активным, когда пользователь выбирает его?
Я новый разработчик ASP.NET Web Forms и пытаюсь использовать Twitter Bootstrap с главной страницей. Я борюсь с установкой элемента navbar как активного, когда пользователь выбирает его. Я создал свою простую главную страницу, следуяэтот урок о том, как использовать Twitter Bootstrap с ASP.NET.
Вот код моей главной страницы:
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="page-header">
<h1>Hello... My First Website with Twitter Bootstrap</h1>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<ul class="nav nav-list">
<li class="nav-header">Navigation</li>
<li class="active"><a href="Default.aspx">ASP.NET</a></li>
<li><a href="Default2.aspx">Java</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">C#</a></li>
</ul>
</div>
<div class="span9">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Затем я добавил этот скрипт вголова чтобы решить проблему с меню:
<script type="text/javascript">
$(document).ready(function () {
var url = window.location.pathname;
var substr = url.split('/');
var urlaspx = substr[substr.length - 1];
$('.nav').find('.active').removeClass('active');
$('.nav li a').each(function () {
if (this.href.indexOf(urlaspx) >= 0) {
$(this).parent().addClass('active');
}
});
});
</script>
Однако ничего не изменилось. Когда я выбрал какой-либо элемент на панели навигации, активный класс не был добавлен в новый выбранный элемент, и я не знаю почему.Не могли бы вы помочь мне решить эту проблему?