用户选择导航栏项时如何将其设置为活动状态? [英] How to set navbar item as active when user selects it?
问题描述
我是ASP.NET Web窗体的新开发人员，正在尝试将Twitter Bootstrap与母版页一起使用.当用户选择导航栏项目时，我正在努力将其设置为活动状态.我通过遵循本教程来创建简单的母版页将Twitter Bootstrap与ASP.NET结合使用.
I am a new ASP.NET Web Forms developer and trying to use Twitter Bootstrap with the Master Page. I am struggling with setting navbar item as active when user selects it. I created my simple master page by following this tutorial about how to use Twitter Bootstrap with 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>
然后，我将此脚本添加到 Head 中，以解决菜单问题:
Then, I added this script to the Head in order to fix issue with the menu:
<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>
但是，什么都没有改变.当我从导航栏中选择任何项目时，活动类尚未添加到新选择的项目中，我也不知道为什么. 您能帮助我解决此问题吗??
However, nothing has been changed. When I selected any item from the navigation bar, the active class has not been added to the new selected item and I don't know why. Could you please help me in fixing this issue.?
推荐答案
使用此:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="/Default.aspx">Default</a></li>
<li><a href="/Clients.aspx">Clients</a></li>
<li><a href="/_display/">Display</a></li>
</ul>
</div>
</div>
</div>
$(document).ready(function () {
var url = window.location;
$('.navbar .nav').find('.active').removeClass('active');
$('.navbar .nav li a').each(function () {
if (this.href == url) {
$(this).parent().addClass('active');
}
});
});
示例: http://jsfiddle.net/yUdZx/3/
然后，在"href"中使用"Page.ResolveUrl"
And, in the "href" use "Page.ResolveUrl"
<a href="<%= Page.ResolveUrl("~/Clients.aspx") %>">Clients</a>
更好...
这篇关于用户选择导航栏项时如何将其设置为活动状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
