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

ページをリロードする場合、現在のルートが li タグに関連付けられたアンカー href と一致する場合、erb テンプレートで ruby​​ を使用してクラスを 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ベースのナビゲーション（ajaxなどでいっぱい）を使用していない限り、クラスをアクティブなページに追加するのはJavaScriptの仕事ではありません。

于 2012-11-30T03:34:41.887 に答える
0

これを試して：

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