我的导航设置如下：
<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。
【问题讨论】：
标签： javascript jquery css sinatra
使用 jQuery，您可以添加一个类来表明它是活动的：
$(this).addClass('active');
用您希望添加类的任何 div 元素替换 (this)。这将允许您根据 div 类 id 设置样式。
【讨论】：
您可以使用window.location.pathname 变量来选择锚标记。
$('a[href="' + window.location.pathname + '"]').addClass('active')
【讨论】：
$('a[href="' + window.location.pathname + '"]').parent().addClass('active')
试试这个：
$(document).ready(function () {
$('.nav a[href="' + window.location.pathname + '"]').addClass('active')
});
【讨论】：
如果您正在重新加载页面，您可以通过 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>
【讨论】：
知道您的视图每次都由您的 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 等）。
【讨论】：