多个 bootstrap 选项卡在彼此内部
Multiple bootstrap tabs inside of eachother
我正在尝试像这样在标签内做标签：
<div class="panel-body">
<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>
<div class="tab-content">
<div class="tab-pane active" id="general">
<div class="tab-pane" id="qualification_history">
<div class="panel-body">
<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>
<div class="tab-content" id="qualification_tab_content">
</div>
</div>
</div>
</div>
</div>
第一个选项卡有效，但第一个选项卡内容中的选项卡未激活，那么如何让第二个选项卡（在第一个 content/tabs 中）工作
首先，您缺少所有选项卡内容 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 以使其正常工作。
检查代码中的注释以检查语法是否有误。与正确的形式进行比较，以帮助您理解原因。
<!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>
我正在尝试像这样在标签内做标签：
<div class="panel-body">
<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>
<div class="tab-content">
<div class="tab-pane active" id="general">
<div class="tab-pane" id="qualification_history">
<div class="panel-body">
<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>
<div class="tab-content" id="qualification_tab_content">
</div>
</div>
</div>
</div>
</div>
第一个选项卡有效，但第一个选项卡内容中的选项卡未激活，那么如何让第二个选项卡（在第一个 content/tabs 中）工作
首先，您缺少所有选项卡内容 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 以使其正常工作。
检查代码中的注释以检查语法是否有误。与正确的形式进行比较，以帮助您理解原因。
<!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>