Question

我第一次使用asp.net玩bootstrap 3。我有一个基本的导航丸菜单，你可以在你希望选择的导航丸上添加“class ='active'”，如下所示：

<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;
    }
}

有没有更专业的方法来处理这个问题？对任何想法开放。

Answer 1

我在其中一个项目中做了什么 - 这是一个非常简单的解决方案，就是在每个顶级视图的页面上 - 就像你的情况中的'Home'，'Profile'一样，我只有一个简单的JQuery片段将特定的药丸设置为活跃的，这些都是这样的：

$（ “＃HomeItem”）。addClass（ “活性”）

这样，设置活跃药丸，完全是在客户端完成的。

设置活动导航菜单项

1 个答案: