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

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

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


twitter-bootstrap asp.net navbar master-pages
person VSP    schedule 10.09.2012    source источник
comment
Подобные ответы уже есть в: здесь   -  person Cesar Alvarado Diaz    schedule 26.07.2016

Ответы (4)


arrow_upward
18
arrow_downward

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

 <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>
person VSP    schedule 11.09.2012
comment
Если вы хотите использовать для этого jQuery, я бы рекомендовал просто установить активный класс на родительский тег li активного тега. Смотрите мой ответ ниже. - person Tillito; 15.10.2014

arrow_upward
3
arrow_downward

Вот что я использовал в 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, который у вас есть.

person David Robbins    schedule 11.10.2013

arrow_upward
1
arrow_downward

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

person Tillito    schedule 14.10.2014

arrow_upward
0
arrow_downward

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

var url = window.location.origin + window.location.pathname;
person Megrez7    schedule 28.08.2016