推特引导&x2B；asp.net母版页，当用户选择导航栏项目时，如何将其设置为活动？

我们的情况和问题相同，但我们使用的是ASP.net和母版页

---

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

我们在母版页上使用以下函数解决了这个问题：

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

$（文档）.ready（函数（）{
var url=window.location.pathname；
var substr=url.split（'/'）；
var urlaspx=substr[substr.length-1]；
$（'.nav'）.find（'.active'）.removeClass（'active'）；
$（'.nav li a'）。每个（函数（）{
如果（this.href.indexOf（urlaspx）>=0）{
$（this.parent（）.addClass（'active'）；
}
});
});

以下是我在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的测试

假设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路由，此解决方案在我当前的项目中可以顺利运行

如果您想操作菜单的活动项，我建议您使用code behind中菜单控件的MenuItemDataBound。但就我而言，这是不必要的。

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

$（文档）.ready（函数（）{
var url=window.location；
$（'ul.nav li a'）。每个（函数（）{
如果（this.href==url）{
$（“ul.nav li”）。每个（功能）{
if（$（this）.hasClass（“活动”））{
$（此）.removeClass（“活动”）；
}
});
$（this.parent（）.parent（）.parent（）.addClass（'active'）；
$（this.parent（）.addClass（'active'）；
}
});
});

由“sujit kinage”提供的解决方案最适合我，但我不得不更改一行：

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

---

如果您想使用jQuery来实现这一点，我建议只将活动类设置为活动a标记的父li标记。请参阅下面我的答案。在中已经有类似的回答：