14

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

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

4

5 回答 5

18

我们在 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>
于 2012-09-11T06:50:35.107 回答
3

这是我在 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 完成测试。

于 2013-10-11T22:42:29.013 回答
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>
于 2015-12-09T09:47:11.910 回答
1

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

于 2014-10-14T23:57:22.027 回答
0

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

var url = window.location.origin + window.location.pathname;
于 2016-08-28T08:16:06.077 回答