Ruby on Rails làm nổi bật liên kết hiện tại trên thanh điều hướng?

Bất cứ ai có thể cho tôi biết làm thế nào để làm nổi bật (có màu) liên kết hiện tại trên thanh điều hướng, sử dụng css? Tôi không muốn sử dụng tùy chọn bộ điều khiển. Đây là mã từ chia sẻ/menu.html.erb:Ruby on Rails làm nổi bật liên kết hiện tại trên thanh điều hướng?

<div id = "navigation"> 

    <ul> 

    <li id="menu"><%=link_to "Menu", menus_path, :class => "menunav"%></li> 
<li id="drink"><%=link_to " Drinks", drinks_path, :class => "drinknav"%> </li> 

</ul> 

</div>

Nguồn

2011-09-25 blawzoo

Nó không hoàn toàn rõ ràng đối với tôi những gì bạn muốn. Với 'liên kết hiện tại' bạn có nghĩa là liên kết trỏ đến trang hiện tại? Và bạn có ý nghĩa gì với 'tùy chọn điều khiển'? Giải pháp bình thường mà tôi đề xuất là để điều chỉnh 'link_to' của bạn và thêm một lớp' current' khi nó trỏ đến trang hiện tại. – nathanvda

Có một vài cách tiếp cận này, nhưng nếu bạn đang theo đuổi một đơn giản, Tôi đề nghị bổ sung thêm một lớp học để cơ thể của bạn.

<body class="<%= params[:controller] %>_controller"> 
    ... 
</body>

Sau đó, trong css bạn có thể làm như sau.

body.menus_controller #navigation a.menunav, 
body.drinks_controller #navigation a.drinknav { 
    background-color : yellow 
    color : blue 
}

này có thể trở nên phức tạp nếu bạn có nhiều trang bạn muốn chia, nhưng ví dụ cơ bản này, nó cần được ok.

Nguồn

2011-09-25 22:08:32

Một cái gì đó như thế này sẽ phù hợp với bạn. Tất nhiên bạn sẽ phải tinh chỉnh nó với mục đích của bạn, có thể tinh vi hơn với trận đấu (hiện tại điều này sẽ chỉ phù hợp với đường dẫn, như bạn có trong ví dụ của bạn).

$("#navigation a[href="+window.location.pathname+"]") 
    .closest('li') 
    .css('background-color', '#ff0');

Vẫn còn tốt hơn, bạn muốn xác định một lớp học "hiện tại" ở đâu đó, sau đó chỉ cần thêm nó:

/* in some stylesheet */ 
#navigation li.current { background-color: #ff0; } 

/* then the js */ 
$("#navigation a[href="+window.location.pathname+"]") 
    .closest('li') 
    .addClass('current');

Nguồn

2011-09-25 22:15:43 numbers1311407

Phương pháp đầu tiên là xử lý hiện tại controller_name và ACTION_NAME để phát hiện những gì trang bạn đang truy cập. Nó tốt, nhưng nó bổ sung thêm một chút về phía máy chủ cho mẫu của ứng dụng cụ thể. Trình trợ giúp đường ray sử dụng theo cách đó là link_to_unless_current. Sử dụng tối thiểu JS. Xem ví dụ here

Thứ hai là phân tích $ (vị trí) và trực tiếp thêm một lớp nhất định vào mục điều hướng đã chọn để đánh dấu mục đó.

Thứ ba (phụ thuộc vào một đối tượng) là xây dựng một đối tượng JS với trạng thái hiện tại của thực thể và thêm các phương thức để thêm một lớp vào một nav hoạt động. Sau đó, bạn có thể khởi tạo lớp JS này, truyền đối tượng và giữ logic đóng gói.

Nguồn

2011-09-26 00:24:19 Anatoly

Tôi khuyên bạn không nên trộn các lớp JS finctionality, cố gắng giữ chúng lệch – Anatoly

Ruby on Rails làm nổi bật liên kết hiện tại trên thanh điều hướng?

Trả lời

Các vấn đề liên quan