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"。

猜测：页面网址是

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。

注意：您需要将 bootstrap.js 包含在您的 html 文件中。

于 2015-03-27T15:09:35.830 回答
0

Jhispter with angularjs 使用https://angular-ui.github.io/bootstrap/因为 bootstrap 与 angular 的使用不完全兼容，所以你创建标签的方式是这样的：

<uib-tabset>
    <uib-tab index="0" heading="Justified">Justified content</uib-tab>
    <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
    <uib-tab index="2" heading="Long Justified">Labeled Justified</uib-tab>
</uib-tabset>
于 2018-03-11T23:27:44.247 回答