2

我的导航设置如下：

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

4

5 回答 5

5

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

$('a[href="' + window.location.pathname + '"]').addClass('active')
于 2012-11-30T03:14:28.150 回答
2

使用 jQuery，您可以添加一个类来指示它处于活动状态：

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

将 (this) 替换为您希望添加类的任何 div 元素。这将允许您根据 div 类 ID 设置样式。

于 2012-11-30T03:08:41.773 回答
0

试试这个：

$(document).ready(function () {
   $('.nav a[href="' + window.location.pathname + '"]').addClass('active')
 });
于 2012-11-30T03:28:39.207 回答
0

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

在控制器中：

...
@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>

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

<ul class="nav">
    <li class="<% if request.fullpath.eql?('/this/items/endpoint') %>selected<% end %>"><a href="/this/items/endpoint">Page 1</a></li>
</ul>
于 2012-11-30T03:33:36.063 回答
0

知道您的视图每次都由您的 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 的业务，除非您使用基于 javascript 的导航（充满 ajax 等）。

于 2012-11-30T03:34:41.887 回答