1

私の問題を説明するためにこのスニペットを取り出しました。

<ul class="nav nav-pills nav-stacked red"> 
    <li><%= link_to "Home",   'http://localhost:3000/home' %></li>
    <li><%= link_to "About",   'http://localhost:3000/about', :data => {:toggle=>"pill"} %></li>
</ul>

「ホーム」をクリックすると、リンクから「http://localhost:3000/home」に移動します。about をクリックすると、ピルは切り替わりますが、リンクが機能しません。これは、結果の html です。

<ul class="nav nav-pills nav-stacked red">
    <li><a href="http://localhost:3000/home">Home</a></li>
    <li><a href="http://localhost:3000/about" data-toggle="pill">About</a></li>
</ul>

私の目標は、リンクをクリックしてアドレスに移動し、対応するピルを強調表示できるようにすることです。

ここで data-toggle="pill" に関するヒントを見ました: http://twitter.github.com/bootstrap/javascript.html#tabs

助けてくれてありがとう！

4

3 に答える 3

1

それはそのようには機能しないと思います...あなたが提供した例のデータトグルにはアンカーリンク（#about）があり、あなたは別のページにリダイレクトします。そのサーバー側を実行するか、アンカーリンクを使用する必要があります。

于 2012-06-28T18:23:57.253 に答える
1

同じ問題に遭遇し、さらにいくつかの実験を行いました。私の結果から、外部リンクを使用するには、次のように「data-toggle」属性を削除する必要があります。

<ul class="nav nav-pills nav-stacked red"> 
    <li><%= link_to "Home",   'http://localhost:3000/home' %></li>
    <li><%= link_to "About",   'http://localhost:3000/about' %></li>
</ul>


<ul class="nav nav-pills nav-stacked red">
    <li><a href="http://localhost:3000/home">Home</a></li>
    <li><a href="http://localhost:3000/about">About</a></li>
</ul>
于 2012-08-05T20:34:15.457 に答える
1

現在のページがアクティブかどうかを確認することになりました

<li class="<%= 'active' if current_page?(root_path) %>">
    <%=link_to root_path do %>
        <i class="icon-white icon-home"></i>
        Home
    <% end %>
</li>
于 2012-08-09T19:52:58.010 に答える