1

JHipster で生成された html ページがあります。タブが必要です。このコードは Bootstrap が提供する基本的な例です。

<ul class="nav nav-tabs">
    <li><a data-toggle="tab" href="#sectionA">Section A</a></li>
    <li class="active"><a data-toggle="tab" href="#sectionB">Section B</a></li>
</ul>
<div class="tab-content">
    <div id="sectionA" class="tab-pane fade in active">
        <p>Section A content…&lt;/p>
     </div>
    <div id="sectionB" class="tab-pane fade">
        <p>Section B content…&lt;/p>
    </div>
</div>

最初のレンダリングでは問題ないように見えますが、タブをクリックするとホームページに移動します。おそらくこれは、たとえば href="#sectionB" が見つからないことを意味します。

推測: ページの URL は

http://localhost:8080/#/mypagename

＃は参照を捨てていますか？

私が考えることができるすべてを試しました。

提案？

4

2 に答える 2

1

この質問は古いことは知っていますが、同じ問題に遭遇したばかりなので、回答を記録すると思いました。
こちらの指示に従いました。

基本的に、通常の href は Angular では機能しません。Bootstrap サイトで提供されている JavaScript コードを使用する必要があります。

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

もちろん、これは Angular なので、UI 操作用のディレクティブを作成する必要があります。

angular.module('myApp')
.directive('showtab',
    function () {
        return {
            link: function (scope, element, attrs) {
                element.click(function(e) {
                    e.preventDefault();
                    $(element).tab('show');
                });
            }
        };
    });

次に、あなたのhtmlで、

<ul class="nav nav-tabs">
    <li class="active"><a showtab="" href="#tabone">Tab One</a></li>
    <li><a showtab="" href="#tabtwo">Tab Two</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tabone">...</div>
    <div class="tab-pane" id="tabtwo">...</div>
</div>

showtab ディレクティブは、タブの切り替えに必要な JavaScript を有効にします。

注: html ファイルに含まれる bootstrap.js が必要です。

于 2015-03-27T15:09:35.830 に答える