我正在尝试在标签内执行标签，如下所示：
roll第一个标签有效，但第一个标签内容中的标签未激活，因此如何让秒标签（在第一个内容/标签内）工作
答案 0 :(得分：0)
首先，您缺少所有tab-content div，以使其正常工作。正确的语法是这样的：
（元素2具有嵌套标签）
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Nested Tabs</h2>
<h3>Click on Element 2 to check the Nested Tab</h3>
<!------------------------------------>
<!-- HERE GOES YOUR NAVIGATION LIST -->
<!------------------------------------>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#element1">Element 1</a>
</li>
<li><a data-toggle="tab" href="#element2">Element 2</a>
</li>
<li><a data-toggle="tab" href="#element3">Element 3</a>
</li>
<li><a data-toggle="tab" href="#element4">Element 4</a>
</li>
</ul>
<!-- THE CLASS "TAB-CONTENT" IS SELF EXPLANATORY IN ITS NAME -->
<!-- USE IT TO ADD ALL YOUR DIVS WITH THE CORRECT ID FROM THE NAV-->
<div class="tab-content">
<div id="element1" class="tab-pane fade in active">
<h4>Element 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="element2" class="tab-pane fade">
<h4>Element 2</h4>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!---------------->
<!-- NESTED TAB -->
<!---------------->
<div class="panel-body">
<!------------------------>
<!-- ADD A NEW NAV LIST -->
<!------------------------>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#nested1">Nested 1</a>
</li>
<li><a data-toggle="tab" href="#nested2">Nested 2</a>
</li>
</ul>
<!-------------------------------------------------------->
<!-- USE THE "TAB-CONTENT" CLASS AGAIN TO ADD YOUR DIVS -->
<!-------------------------------------------------------->
<div class="tab-content">
<div id="nested1" class="tab-pane fade in active">
<h4>Nested 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="nested2" class="tab-pane fade">
<h4>Nested 2</h4>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<!-------------------------->
<!-- NESTED TABS END HERE -->
<!-------------------------->
</div>
<div id="element3" class="tab-pane fade">
<h4>Element 3</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="element4" class="tab-pane fade">
<h4>Element 4</h4>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
</body>
</html>
对代码进行了评论，以帮助您理解语法。
请记住检查每个标签调用的ID，以使其正常工作。
检查代码中的coments以检查您在syntaxis中是否出错。与正确的表格比较，以帮助您找不到原因。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel-body">
<!-------------->
<!-- NAV LIST -->
<!-------------->
<ul class="nav nav-tabs" data-tabs="tabs" id="tabs">
<li class="active" id="general_tab">
<a data-toggle="tab" href="#general">
<?php echo System::translate( "General"); ?>
</a>
</li>
<li class="" id="communication_tab">
<a data-toggle="tab" href="#communication">
<?php echo System::translate( "Communication"); ?>
</a>
</li>
<li id="employment_history_tab">
<a data-toggle="tab" href="#employment_history">
<?php echo System::translate( "Employment"); ?>
</a>
</li>
<li id="qualification_history_tab">
<a data-toggle="tab" href="#qualification_history">
<?php echo System::translate( "Qualification"); ?>
</a>
</li>
<li class="" id="certificate_tab">
<a data-toggle="tab" href="#certificates">
<?php echo System::translate( "Certificates"); ?>
</a>
</li>
</ul>
<!----------------->
<!-- TAB CONTENT -->
<!----------------->
<div class="tab-content">
<!------------------------------------------------>
<!-- GENERAL DOESNT NEED TO WRAP THE OTHER TABS -->
<!------------------------------------------------>
<div class="tab-pane active" id="general">
<div class="tab-pane" id="qualification_history">
<div class="panel-body">
<!-------------->
<!-- NAV LIST -->
<!-------------->
<ul class="nav nav-tabs" data-tabs="tabs" id="qualification_tabs">
<li class="" id="qualification_add">
<a data-toggle="tab" href="#qualification_add">
<?php echo System::translate( "Add qualification"); ?>
</a>
</li>
<li class="active" id="qualification_overview">
<a data-toggle="tab" href="#qualification_overview">
<?php echo System::translate( "Qualification overview"); ?>
</a>
</li>
</ul>
<!----------------->
<!-- TAB CONTENT -->
<!----------------->
<div class="tab-content" id="qualification_tab_content">
<!------->
<!-- YOU ARE MISSING YOUR DIVS WITH THE CORRECT ID FROM THE NAV LIST OF THE NESTED ELEMENT -->
<!------->
</div>
</div>
<!-------------------------->
<!-- NESTED TABS END HERE -->
<!-------------------------->
</div>
<!-- GIVE ME MOAR TABS -->
</div>
<!-- GENERAL DOESNT NEED TO WRAP -->
</div>
</div>
</body>
</html>