Làm cách nào để đánh dấu trang đang hoạt động trong menu trang chính?

Question

Tôi có một menu bên trong một masterpage (trong một trang web ASP.NET), và tôi muốn làm nổi bật trang hoạt động trong menu chính và menu phụ.

HTML:

<ul id="nav" class="sf-menu"> 
    <li class="current-menu-item"><a href="index.html">Home</a></li>  
    <li><a href="page.html">menu-2</a> 
     <ul> 
      <li><a href="page-full.html">full</a></li> 
      <li><a href="page-features.html">featurs</a></li> 
      <li><a href="page-typography.html">typography</a></li> 
     </ul> 
    </li> 
</ul> 

CSS:

#nav>li.current-menu-item>a, 
#nav>li.current_page_item>a{ 
    color: #fe8300; 
} 

cảm ơn trước.

Answer 1

cuối cùng tôi giải quyết vấn đề của tôi với việc sử dụng jQuery:

var str=location.href.toLowerCase(); 
    $("#nav li a").each(function() { 
     if (str.indexOf($(this).attr("href").toLowerCase()) > -1) { 
      $("li.current-menu-item").removeClass("current-menu-item"); 
      $(this).parent().addClass("current-menu-item"); 
     } 
    }); 
    $("li.current-menu-item").parents().each(function(){ 
     if ($(this).is("li")){ 
      $(this).addClass("current-menu-item"); 
     } 
    }); 

Answer 2

Có nhiều cách để thực hiện việc này. Có một số cách dễ dàng và một số thông tin xấu xí:

Giải pháp 1: Sử dụng điều khiển menu. .NET Menu Control chuẩn có một giải pháp dễ dàng để thực hiện điều này. Đây là giải pháp sạch và nhanh nhất theo ý kiến ​​của tôi. Hãy xem this bài đăng. Maby nó sẽ giúp bạn nếu bạn chọn giải pháp này.

Giải pháp 2: Bạn coud sử dụng một số loại javascript để đánh dấu mục hiện tại. jQuery sẽ làm cho dễ dàng hơn nếu bạn không muốn viết tất cả mọi thứ một mình. Đối với giải pháp này, hãy xem trang this. Nó đã lỗi thời nhưng vẫn hiệu quả.

Giải pháp 3: Đây là giải pháp kinda xấu xí và bạn có thể làm điều đó bằng nhiều cách khác nhau: Bạn có thể thay đổi <a> yếu tố để điều khiển HyperLink và thiết lập một số loại phiên hoặc cookie khi bạn bấm vào chúng. Khi đặt, bạn có thể thay đổi kiểu dựa trên giá trị mà cookie có.

Thậm chí còn có nhiều cách để bạn có thể giải quyết vấn đề này nhưng tôi nghĩ rằng hai giải pháp đầu tiên sẽ giúp bạn.

Answer 3

kiểm tra url của bạn và nhận tên tệp html sau đó so sánh nó và đặt lớp css của bạn trong trang chính hoặc tạo một menu UserControl riêng biệt và sau đó đặt nó trên trang chính.

Bạn phải thay đổi thẻ neo của bạn để Hyperlinks

đánh dấu asp.net:

<li><asp:HyperLink runat="server" ID="lnk_full" NavigateUrl="page-full.html" Text="full" /></li> 
<li><asp:HyperLink runat="server" ID="lnk_features" NavigateUrl="page-features.html" Text="features" /></li> 
<li><asp:HyperLink runat="server" ID="lnk_typography" NavigateUrl="page-typography.html" Text="typography" /></li> 

codebehind:

protected void SelectMenu() 
    { 
     try 
     { 
      string page = Path.GetFileNameWithoutExtension(Request.AppRelativeCurrentExecutionFilePath); 
      string pageDirectory = Path.GetDirectoryName(Request.AppRelativeCurrentExecutionFilePath); 

      string category = Request.QueryString.Count>0 ? Request.QueryString[0] : string.Empty; 
      if (pageDirectory.Length > 3) 
      { 
       pageDirectory = pageDirectory.Substring(2, pageDirectory.Length - 2); 
      } 
      if (pageDirectory != null && pageDirectory.Length > 0 && page != null && page.Length > 0) 
      { 
       switch (pageDirectory) 
       { 
        case "Secure\\Clients": 
         switch (page) 
         { 
          case "page-full": 
           lnk_full.CssClass = "current-menu-item"; 
           break; 
          case "page-features": 
           lnk_features.CssClass = "current-menu-item"; 
           break; 
          case "page-typography": 
           lnk_typography.CssClass = "current-menu-item"; 
           break; 
         } 
         break; 
       } 
      } 
     } 
     catch (Exception ex) 
     { 
      throw ex; 
     } 
    } 

Nếu trang web của bạn là trong thư mục gốc rồi không chuyển đổi cho pageDirectory. và nếu bạn đang sử dụng truy vấn thì bạn có thể chuyển đổi cho category. Hy vọng điều này sẽ giúp bạn.

Answer 4

$(function() { 
     $(".navbar‐btn a").each(function() { 
      var hreff = this.href.trim().split("/").splice(3, 4); 

      if (hreff.length > 1) 
       hreff.splice(0, 1); 

      if (hreff[0] == window.location.pathname.split("/").splice(1, 1)[0]) 
       $(this).parent().addClass("active"); 
     }); 
    }) 

Answer 5

jQuery(document).ready(function() { 
    var str = location.href.toLowerCase(); 
    jQuery('#topnav li a[href=\'' + str + '\']').addClass('active'); 
});