• Section A
  • Section B
  • JHipster页面内的Twitter Bootstrap选项卡 - 如何?

    775 观看

    2回复

    762 作者的声誉

    我有一个JHipster生成的html页面。需要Tabs,这段代码是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…</p>
         </div>
        <div id="sectionB" class="tab-pane fade">
            <p>Section B content…</p>
        </div>
    </div>
    

    它在第一次渲染时看起来很好,但是当您单击一个选项卡时,它会将您带到主页。据推测,这意味着它无法找到href =“#sectionB”。

    猜猜:页面网址是

    http://localhost:8080/#/mypagename
    

    所以#抛弃了参考?

    尝试过我能想到的一切。

    建议?

    作者: Ribeye 的来源 发布者: 2014 年 6 月 19 日

    回应 (2)


    1

    11 作者的声誉

    我知道这个问题很老,但我想我会记录一个答案,因为我遇到了同样的问题。
    我按照这里的说明操作

    基本上,正常的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。

    作者: mhollins 发布者: 27.03.2015 03:09

    0

    1919 作者的声誉

    带有angularjs的Jhispter使用https://angular-ui.github.io/bootstrap/,因为使用带角度的bootstrap不完全兼容,所以你创建标签的方式是这样的:

    <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>
    
    作者: delkant 发布者: 11.03.2018 11:27
    32x32