2014-01-26 214 views
3

我正在用asp.net第一次玩bootstrap 3。我有一个基本的导航丸菜单,您只需添加到已选定的“类=‘主动’”在任何一个导航药丸,你想,像这样:设置活动的导航菜单项

<ul class="nav nav-pills"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Profile</a></li> 
    <li><a href="#">Messages</a></li> 
</ul> 

我想知道是否有一个最佳实践,用于设置哪个LI获得活动类。我有一个工作解决方案,但感觉笨重。

在标记代码,我使用的文字:

<li <%=NavHomeItem%> id="HomeItem" ><a href="Default.aspx">Home</a></li> 
<li <%=NavProfileItem%> id="ProfileItem"><a href="Profile.aspx">Profile</a></li> 

在代码隐藏,我设置的字面基于被请求的页面:

public String NavHomeItem = ""; 
public String NavProfileItem = ""; 
public String NavMessagesItem = ""; 

private void SetNavigationHtml() 
{ 
    var url = Page.Request.Url.AbsolutePath; 
    switch (url.ToLower()) { 
     case "/profile.aspx": 
      NavProfileItem = "class=\"active\""; 
      break; 
     case "/messages.aspx": 
      NavMessagesItem = "class=\"active\""; 
      break; 
     default: 
      NavHomeItem = "class=\"active\""; 
      break; 
    } 
} 

有没有更专业处理这个问题的方法?打开任何想法。

回答

0

我在我的一个项目中做了什么 - 这是一个非常简单的解决方案,就是在每个顶层视图的页面上 - 就像您的案例中的'Home','Profile'一样,我只是有一个简单的JQuery片断,设置具体的药丸活跃,类似的规定:

$( “#HomeItem”)addClass( “活动”)

这样,设置活动丸,做法完全是客户端-侧。