Twitter bootstrap + trang chủ asp.net, cách đặt mục thanh điều hướng là hoạt động khi người dùng chọn nó?

Question

Chúng tôi đang trong se cùng hoàn cảnh như câu hỏi Make Twitter Bootstrap navbar link active, nhưng trong trường hợp của chúng tôi, chúng tôi đang sử dụng ASP.net và MasterPages ...

Điều được thanh điều hướng được định nghĩa tại masterpage và khi bạn bấm vào một menuitem bạn đang chuyển hướng đến trang con tương ứng, vậy làm thế nào bạn sẽ làm gì để thay đổi mục hoạt động thanh điều hướng một cách consecuently mà không cần sao chép logic trong mỗi trang con? (Tốt mà không cần biến session và javascript chỉ tại trang chủ)

Answer 1

Chúng tôi giải quyết nó với các chức năng sau tại 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

Dưới đây là những gì tôi đã được sử dụng trong 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> 

Chỉ cần xác định tên của trang là thuộc tính trong mô hình, sau đó hoàn tất kiểm tra cho từng li mà bạn có.

Answer 3

Giả sử rằng lớp hoạt động được thiết lập một cách chính xác bằng ASP.net, tôi muốn giới thiệu một giải pháp dễ dàng hơn:

// 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'); 

Sử dụng ASP.net định tuyến, giải pháp này hoạt động trơn tru trong dự án hiện tại của tôi.

Và nếu bạn muốn thao tác mục hiện hoạt của menu, tôi khuyên bạn nên sử dụng MenuItemDataBound của điều khiển menu trong mã phía sau để thay thế. Nhưng trong trường hợp của tôi, điều này là không cần thiết.

Answer 4

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

Giải pháp bởi "kinage Sujit" làm việc tốt nhất cho tôi, tuy nhiên tôi đã phải thay đổi một dòng:

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