我有引导选项卡实现，当我点击标题它不切换时，当我点击标签重定向到主页它不进入面板主体，我花了很多时间，但无法弄清楚问题。任何帮助将不胜感激。
到目前为止尝试过代码......
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>
答案 0 :(得分：0)
确保您已在页面末尾嵌入javascript和jquery，
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<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>