引导切换不起作用？

Question

我有引导选项卡实现，当我单击标题时它没有切换，当我单击选项卡时它重定向到主页它没有进入面板正文，我花了很多时间但无法弄清楚问题。任何帮助将不胜感激。

到目前为止尝试过的代码......

HTML

<div class="panel panel-default">
<div class="panel-body" collapse="isCollapsed">
<accordion close-others="false">
        <accordion-group heading="Process Rating" is-open="status.isMetricBaseOpen">
            <accordion-heading>
        <small>Process Rating <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isMetricBaseOpen, 'glyphicon-chevron-right': !status.isMetricBaseOpen}"></i></small>
        </accordion-heading>
            <!-- Process edit mode  -->
                        <ul class="nav nav-tabs" role="tablist" id="myTab">
                            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Line of Business
                                Ratings</a></li>
                            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Compliance Ratings</a></li>
                        </ul>
                        <div class="row tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <div class="col-md-11">
                                        <button require-control-point="PROCESS_RATING_ADD"
                                            class="btn btn-default pull-right " type="button"
                                            ng-click="gotoQstnPage(1)" ng-disabled="disableRiskRatingBtn">Create
                                            Inherent Risk Rating</button>
                                    </div>
                                </div>
                                <strong>Inherent Risk Ratings</strong>
                                <div kendo-grid="ihtRskRatingGrid"
                                    options="ihtRskRatingGridOptions"></div>
                                <br /> <strong>Process Ratings</strong>
                                <div kendo-grid="processRatingGrid"
                                    options="processRatingGridOptions">
                                    <div kendo-window="ProcessRatingWin" options="PrtWinOptions"></div>
                                </div>
                            </form>
                        </div>
                         <div role="tabpanel" class="tab-pane" id="profile">THis is compliance </div>
                    </div>
        </accordion-group>
        </div>

Answer 1

确保您在页面末尾嵌入了javascript 和jquery，

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Javascript

<script src="js/bootstrap.min.js"></script>

或者看下面你的代码正在运行

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap Template</title>
    
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
            
      </head>
      <body>

        <div class="panel-group" id="accordion" >
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle collapsed" data-toggle="collapse"
                        href="" data-target="#collapseProcessRating">Process Rating</a>
                </h4>
            </div>
            <!-- Process edit mode  -->
            <div id="collapseProcessRating" class="panel-collapse collapse in">
                <div class="panel-body">
                        <ul class="nav nav-tabs" role="tablist" id="myTab">
                            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Line of Business
                                Ratings</a></li>
                            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Compliance Ratings</a></li>
                        </ul>
                        <div class="row tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <div class="col-md-11">
                                        <button require-control-point="PROCESS_RATING_ADD"
                                            class="btn btn-default pull-right " type="button"
                                            ng-click="gotoQstnPage(1)" ng-disabled="disableRiskRatingBtn">Create
                                            Inherent Risk Rating</button>
                                    </div>
                                </div>
                                <strong>Inherent Risk Ratings</strong>
                                <div kendo-grid="ihtRskRatingGrid"
                                    options="ihtRskRatingGridOptions"></div>
                                <br /> <strong>Process Ratings</strong>
                                <div kendo-grid="processRatingGrid"
                                    options="processRatingGridOptions">
                                    <div kendo-window="ProcessRatingWin" options="PrtWinOptions"></div>
                                </div>
                            </form>
                        </div>
                         <div role="tabpanel" class="tab-pane" id="profile">THis is compliance </div>
                    </div>
            </div>
        </div>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
      </body>
    </html>