Question

我的导航设置如下：

<ul class="nav nav-pills">
  <li><a href="/questions/all">All</a></li>
  <li><a href="/questions/popular">Popular</a></li>
  <li><a href="/questions/fun">Fun</a></li>
</ul>

当点击其中一个时，它会映射到我的Sinatra路线（即get '/questions/:filter' do...）。点击其中任何一个都会更新页面，但它们仍然使用相同的.erb视图。

我正在试图弄清楚如何将“active”类应用于当前正在查看的<li>导航项。这样，导航项将突出显示，以便用户知道他们所在的视图（无需查看实际的URL）。

非常感谢任何帮助。如果需要，我可以访问jQuery。

Answer 1

您可以使用window.location.pathname变量来选择锚标记。

$('a[href="' + window.location.pathname + '"]').addClass('active')

Answer 2

使用jQuery，您可以添加一个类来表明它是活动的：

$(this).addClass('active');

用你希望添加类的div元素替换（this）。这将允许您根据div类ID进行样式设置。

Answer 3

试试这个：

$(document).ready(function () {
   $('.nav a[href="' + window.location.pathname + '"]').addClass('active')
 });

Answer 4

如果您正在重新加载页面，则可以使用ruby通过erb模板将类添加到li标记（如果当前路由与li标记的关联锚点href匹配）。

在控制器中：

...
@body_class = "page2"
@nav_links = ['page1', 'page2', 'page3']
...

在视图模板中：

<body class="<%= @body_class %>">
...
<ul class="nav">
    <% @nav_links.each do |link| %>
        <li <% if link.eql?(@body_class) %>class="selected"<% end %>><a href="<%= link %>"><%= link %></a></li>
    <% end %>
</ul>
...
</body>

如果您只想使用当前网址并跳过控制器：

<ul class="nav">
    <li class="<% if request.fullpath.eql?('/this/items/endpoint') %>selected<% end %>"><a href="/this/items/endpoint">Page 1</a></li>
</ul>

Answer 5

知道您的视图每次都由您的sinatra webapp提供，我建议您使用变量和简单的if语句将逻辑添加到其中。一种（在php中）：

<ul>
<?php
  $filters = array("all", "popular", "fun");
  foreach($filters as $filter):
?>

<li>
<a href="/questions/<?php echo $filter; ?>"
  <?php if ($filter == $currentfilter) { ?>class="active"<?php }; ?>>
  <?php echo $filter; ?>
</a>
</li>

<?php endforeach; ?>
</ul>

直接提供您的观点非常重要。除非您使用基于javascript的导航（充满ajax等），否则将类添加到活动页面不是javascript的业务。

选择后，将类添加到导航项

5 个答案: