Twitter bootstrap + asp.net masterpages, как настроить элемент navbar как активный, когда пользователь его выбирает?

Мы находимся в той же ситуации, что и вопрос Активно активируем навигационную ссылку Twitter-бутстрапа, но в нашем случае мы используем ASP.net и MasterPages...

Дело в том, что navbar определен на главной странице, и когда вы нажимаете элемент меню, вы перенаправляетесь на соответствующую дочернюю страницу, так как бы вы сделали, чтобы изменить активный элемент навигации навсегда, не реплицируя логику на каждой дочерней странице? (Желательно без переменных сеанса и javascript только на главной странице)

Ответ 1

Мы решили это со следующей функцией на главной странице:

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

Ответ 2

Вот что я использовал в 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>

Просто определите имя свойства страницы в модели, а затем заполните тест для каждого ли, который у вас есть.

Ответ 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>

Ответ 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 элемента управления меню. Но в моем случае это не было необходимо.

Ответ 5

Решение "sujit kinage" работало лучше всего для меня, однако мне пришлось изменить одну строку:

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