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

голоса
14

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

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

Задан 10/09/2012 в 16:35
источник пользователем
На других языках...                            


5 ответов

голоса
18

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

 <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>
Ответил 11/09/2012 в 07:50
источник пользователем

голоса
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>
Ответил 09/12/2015 в 09:47
источник пользователем

голоса
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>

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

Ответил 11/10/2013 в 23:42
источник пользователем

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

Ответил 15/10/2014 в 00:57
источник пользователем

голоса
0

Решение по «Sujit kinage» работал лучше для меня, но мне пришлось изменить одну строку:

var url = window.location.origin + window.location.pathname;
Ответил 28/08/2016 в 08:16
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more