Question

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

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

Answer 1

我们使用Master Page：

中的以下功能解决了这个问题

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

Answer 2

以下是我在剃刀中使用的内容：

<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完成测试。

Answer 3

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

Answer 4

假设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。但就我而言，这不是必要的。

Answer 5

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

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

Twitter bootstrap + asp.net主页，如何在用户选择导航栏项时将其设置为活动状态？

5 个答案: