Twitter bootstrap + asp.net masterpages，如何在用户选择导航栏项目时将其设置为活动？答案

【问题标题】：Twitter bootstrap + asp.net masterpages, how to set navbar item as active when user selects it?Twitter bootstrap + asp.net masterpages，如何在用户选择导航栏项目时将其设置为活动？
【发布时间】：2012-09-03 12:16:16
【问题描述】：

我们的情况与问题Make Twitter Bootstrap navbar link active 相同，但在我们的例子中，我们使用的是 ASP.net 和 MasterPages...

问题是导航栏是在母版页中定义的，当您单击菜单项时，您将被重定向到相应的子页面，那么如何在不复制每个子页面中的逻辑的情况下连续更改导航栏活动项？（最好在母版页没有会话变量和 javascript）

【问题讨论】：

已经有类似回复在：here

标签： asp.net twitter-bootstrap master-pages navbar

【解决方案1】：

“sujit kinage”的解决方案对我来说效果最好，但是我不得不改变一行：

var url = window.location.origin + window.location.pathname;

【讨论】：

【解决方案2】：

 <script type="text/javascript">
     $(document).ready(function () {
         var url = window.location;
         $('ul.nav li a').each(function () {
             if (this.href == url) {
                 $("ul.nav li").each(function () {
                     if ($(this).hasClass("active")) {
                         $(this).removeClass("active");
                     }
                 });
                 $(this).parent().parent().parent().addClass('active');
                 $(this).parent().addClass('active');                     
             }
         });
     });
</script>

【讨论】：

【解决方案3】：

假设 ASP.net 正确设置了活动类，我会推荐一个更简单的解决方案：

// Add the class to the parent li element of the active a element:
$('#NavigationMenu ul li a.active').parent().addClass('active');

// Remove the active class from the a element:
$('#NavigationMenu ul li a.active').removeClass('active');

使用 ASP.net 路由，这个解决方案在我当前的项目中运行顺利。

如果你想操作菜单的活动项，我建议在后面的代码中使用菜单控件的 MenuItemDataBound。但就我而言，这不是必需的。

【讨论】：

【解决方案4】：

这是我在 Razor 中使用的：

<li class="@(Model.PageName == "DataEntryForms" ? "active" : "")">
  <a href="DataEntryForms">     
    Data Entry Forms
  </a>
</li>
<li class="@(Model.PageName == "UserAdmin" ? "active" : "")">
  <a href="UserAdmin">      
    User Administration
  </a>
</li>

只需将页面名称定义为模型中的属性，然后为您拥有的每个 li 完成测试。

【讨论】：

【解决方案5】：

我们在母版页使用以下功能解决了这个问题：

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

【讨论】：

如果你想为此使用 jQuery，我建议将活动类设置为活动 a 标签的父 li 标签。请参阅下面的答案。