web-dev-qa-db-ja.com

データトグルを使用したブートストラップタブにより、angularjsでリロードが発生する

私はちょうどAngularJS 1.2に移行しました。そして、データトグルで構成されたすべてのメニュー/ナビゲーション要素、たとえば次のことに気付きました。

<li><a href="#additionalSelection" data-toggle="tab">Additional Selection</a></li>

もう機能していません。 id = "additionalSelection"で要素を切り替える必要があります。これは、Angularのバージョン1.0.8を使用していたときに、Angular＆Bootstrap=.

しかし、今、アンカー要素をクリックすると、Angularこのクリックをインターセプトし、ルートに移動しようとしますadditionalSelectionそして、ページの更新を引き起こします...

修正する方法はありますか？

angularjstwitter-bootstraptwitter-bootstrap-3
47
dragonfly

解決策は、href属性をdata-targetに置き換えるだけです。これで問題が解決します。

<li><a data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li>
153
dragonfly

dragonflyが指摘したように、data-targetはhrefの代わりに正常に動作します。

CSSにはわずかな違いがあります。 data-targetを使用する場合とhrefを使用する場合、カーソルはpointerではなくなります。余分なCSSを追加したくない場合は、次のことができます。

<a href="#additionalSelection" data-toggle="tab" onclick="return false;">Selection</a>

これは単なる提案であり、エレガントなソリューションではありません。ただし、何らかの理由でhrefを使用する場合は、onclick="return false;"

9
Brian

data-targetからhref属性を置き換えるだけです

<li><a data-target="#switchTabs" data-toggle="tab">Tabs</a></li>
3
Rana Pratap Singh

カーソルを保持するソリューションは（hrefではなくdata-targetを使用してナビゲートします）：

<li><a href="" data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li>

hrefを追加するとカーソルは手に切り替わりますが、「」として空白のままにしてもページはリロードされません。

0
Rebecca