我有一些嵌套的标签，纵向和横向，但它们不会切换活动状态或者出现错误
body
{
min-height: 100%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<div class="container-fluid row c2" id="my_jiku_box">
<div class="col-12 row" id="args">
<div class="col-4 nav flex-column nav-pills c1" id="vertMenu" role="tablist">
<a class="nav-link active" href="#v-pills-0" data-toggle="pill" role="tab"
aria-controls="#v-pills-0" aria-expanded="true">1980 Markina attack<span class=
"spaceTimeInfo">Spain, 20 September 1980</span></a><a class="nav-link" href=
"#v-pills-1" data-toggle="pill" role="tab" aria-controls="#v-pills-1"
aria-expanded="false">Cafetería Rolando bombing<span class=
"spaceTimeInfo">Spain, 13 September 1974</span></a>
</div>
<div class="col-8" id="horMenu">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active show" aria-labelledby="v-pills-0" id=
"v-pills-0">
<ul class="nav nav-pills nav-justified" role="tablist" id="pills-tab0">
<li class="nav-item"><a class="nav-link active" href="#pills-0"
data-toggle="pill" role="tab" aria-controls="pills-0" aria-expanded=
"true">Text</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-images0" data-toggle=
"pill" role="tab" aria-controls="pills-0" aria-expanded=
"true">Images</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-videos0" data-toggle=
"pill" role="tab" aria-controls="pills-0">Videos</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active show" id="pills-0">
<div class="toolbar">
<a data-command="bold" href="#"></a><a data-command="italic" href=
"#"></a><a data-command="underline" href="#"></a><a data-command=
"strikeThrough" href="#"></a>
</div>
<div class="dropEL col">
<div class="drag-header">
Drag and resize me!
</div>
<p class="content_jiku" contenteditable="true">The 1980 Markina attack
was a gun attack by the Basque separatist organisation ETA which
occurred on 20 September 1980 near the Basque town of Markina (Spanish:
). The targets were a group of off-duty civil guards who were having
lunch in a bar in the town. Four civil guards were killed. The attack
was one of the deadliest of 1980, the year when ETA killed more people
than any other.</p>
</div>
</div>
<div class="tab-pane fade dropEL col" id="pills-images0">
<div class="drag-header"></div><img class="img-fluid" src=
"https://lh6.googleusercontent.com/proxy/z9R-exzTZRIbnzTVezVAK9u4GLKmJxavscBKYnJnZqb25oDK2aF0pbC3K1BppdKBabOaxUMTB6L8_A1bTxp_0V_zqwmV2z4_MBJH0_67azUnVp02JeQThcFNVfOj8K_hN4OYKAdXPjGWjgfE8jY=-rj-w300-h300-l95-c0x039be5" /></div>
<div class="tab-pane fade dropEL col" id="pills-videos0">
<div class="drag-header"></div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src=
"https://www.youtube.com/embed/vQMSwhfnwZI?rel=0&modestbranding=1"></iframe>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" aria-labelledby="v-pills-1" id="v-pills-1">
<ul class="nav nav-pills nav-justified" role="tablist" id="pills-tab1">
<li class="nav-item"><a class="nav-link" href="#pills-1" data-toggle="pill"
role="tab" aria-controls="pills-1" aria-expanded="false">Text</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-images1" data-toggle=
"pill" role="tab" aria-controls="pills-1" aria-expanded=
"false">Images</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-videos1" data-toggle=
"pill" role="tab" aria-controls="pills-1">Videos</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="pills-1">
<div class="toolbar">
<a data-command="bold" href="#"></a><a data-command="italic" href=
"#"></a><a data-command="underline" href="#"></a><a data-command=
"strikeThrough" href="#"></a>
</div>
<div class="dropEL col">
<div class="drag-header">
Drag and resize me!
</div>
<p class="content_jiku" contenteditable="true">The Cafetería
Rolando bombing was an attack on 13 September 1974 at the Rolando cafe
in Calle del Correo, Madrid, Spain which killed 13 people and wounded
71. Though no claim of responsibility was made, the attack is widely
believed to have been carried out by the armed Basque separatist group
ETA.</p>
</div>
</div>
<div class="tab-pane fade dropEL col" id="pills-images1">
<div class="drag-header"></div><img class="img-fluid" src=
"https://i2.wp.com/upload.wikimedia.org/wikipedia/commons/thumb/6/67/Real_Casa_de_Correos_%28Madrid%29_05b.jpg/1280px-Real_Casa_de_Correos_%28Madrid%29_05b.jpg" /></div>
<div class="tab-pane fade dropEL col" id="pills-videos1">
<div class="drag-header"></div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src=
"https://www.youtube.com/embed/VVOCg3kInUk?rel=0&modestbranding=1"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 row col"></div>
jsFiddle在这里，我基本上尝试混合使用bootstrap vertical tab菜单来切换水平标签系统
答案 0 :(得分：2)
将虚拟类mainTab添加到左侧的选项卡，以标识水平选项卡中的垂直选项卡。声明面板变量后，将此代码添加到click函数中。我已经粘贴了在外部html文件中为我工作的代码，如果我使视口大小更大，也是小提琴。唯一的问题是存在一些与此问题无关的控制台错误。 “无法构造'PresentationRequest'：文档是沙盒的，缺少'allow-presentation'标志。”
您可能需要设置的另一件事是默认水平标记在加载时处于活动状态。
由于外部div上的nav-pills类，您的嵌套选项卡未删除活动颜色。
<div class="container-fluid row c2" id="my_jiku_box">
<div class="col-6 row" id="args">
<div class="col-4 nav flex-column nav-pills c1" id="vertMenu" role="tablist">
<a class="nav-link active mainTab" href="#v-pills-0" data-toggle="pill" role="tab"
aria-controls="#v-pills-0" aria-expanded="true">1980 Markina attack<span class=
"spaceTimeInfo">Spain, 20 September 1980</span></a><a class="nav-link mainTab" href=
"#v-pills-1" data-toggle="pill" role="tab" aria-controls="#v-pills-1"
aria-expanded="false">Cafetería Rolando bombing<span class=
"spaceTimeInfo">Spain, 13 September 1974</span></a>
</div>
<div class="col-8" id="horMenu">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active show hMain" aria-labelledby="v-pills-0" id=
"v-pills-0">
<ul class="nav nav-justified" role="tablist" id="pills-tab0">
<li class="nav-item"><a class="nav-link active" href="#pills-0"
data-toggle="pill" role="tab" aria-controls="pills-0" aria-expanded=
"true">Text</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-images0" data-toggle=
"pill" role="tab" aria-controls="pills-0" aria-expanded=
"true">Images</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-videos0" data-toggle=
"pill" role="tab" aria-controls="pills-0">Videos</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active show" id="pills-0">
<div class="toolbar">
<a data-command="bold" href="#"></a><a data-command="italic" href=
"#"></a><a data-command="underline" href="#"></a><a data-command=
"strikeThrough" href="#"></a>
</div>
<div class="dropEL col">
<div class="drag-header">
Drag and resize me!
</div>
<p class="content_jiku" contenteditable="true">The 1980 Markina attack
was a gun attack by the Basque separatist organisation ETA which
occurred on 20 September 1980 near the Basque town of Markina (Spanish:
). The targets were a group of off-duty civil guards who were having
lunch in a bar in the town. Four civil guards were killed. The attack
was one of the deadliest of 1980, the year when ETA killed more people
than any other.</p>
</div>
</div>
<div class="tab-pane fade dropEL col" id="pills-images0">
<div class="drag-header"></div><img class="img-fluid" src=
"https://lh6.googleusercontent.com/proxy/z9R-exzTZRIbnzTVezVAK9u4GLKmJxavscBKYnJnZqb25oDK2aF0pbC3K1BppdKBabOaxUMTB6L8_A1bTxp_0V_zqwmV2z4_MBJH0_67azUnVp02JeQThcFNVfOj8K_hN4OYKAdXPjGWjgfE8jY=-rj-w300-h300-l95-c0x039be5" /></div>
<div class="tab-pane fade dropEL col" id="pills-videos0">
<div class="drag-header"></div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src=
"https://www.youtube.com/embed/vQMSwhfnwZI?rel=0&modestbranding=1"></iframe>
</div>
</div>
</div>
</div>
<div class="tab-pane fade hMain" aria-labelledby="v-pills-1" id="v-pills-1">
<ul class="nav nav-justified" role="tablist" id="pills-tab1">
<li class="nav-item"><a class="nav-link" href="#pills-1" data-toggle="pill"
role="tab" aria-controls="pills-1" aria-expanded="false">Text</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-images1" data-toggle=
"pill" role="tab" aria-controls="pills-1" aria-expanded=
"false">Images</a></li>
<li class="nav-item"><a class="nav-link" href="#pills-videos1" data-toggle=
"pill" role="tab" aria-controls="pills-1">Videos</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="pills-1">
<div class="toolbar">
<a data-command="bold" href="#"></a><a data-command="italic" href=
"#"></a><a data-command="underline" href="#"></a><a data-command=
"strikeThrough" href="#"></a>
</div>
<div class="dropEL col">
<div class="drag-header">
Drag and resize me!
</div>
<p class="content_jiku" contenteditable="true">The Cafetería
Rolando bombing was an attack on 13 September 1974 at the Rolando cafe
in Calle del Correo, Madrid, Spain which killed 13 people and wounded
71. Though no claim of responsibility was made, the attack is widely
believed to have been carried out by the armed Basque separatist group
ETA.</p>
</div>
</div>
<div class="tab-pane fade dropEL col" id="pills-images1">
<div class="drag-header"></div><img class="img-fluid" src=
"https://i2.wp.com/upload.wikimedia.org/wikipedia/commons/thumb/6/67/Real_Casa_de_Correos_%28Madrid%29_05b.jpg/1280px-Real_Casa_de_Correos_%28Madrid%29_05b.jpg" /></div>
<div class="tab-pane fade dropEL col" id="pills-videos1">
<div class="drag-header"></div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src=
"https://www.youtube.com/embed/VVOCg3kInUk?rel=0&modestbranding=1"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 row col"></div>
<script type="text/javascript">
$(document).ready(function(){
$(".nav-link").removeClass("active");
var elem = $(".mainTab")[0];
$(elem).addClass("active");
var href=$(elem).attr("href")
console.log(href);
$("div"+href).show();
console.log($("div"+href).find(".nav-link")[0]);
$($("div"+href).find(".nav-link")[0]).addClass("nav-pills");
});
$(".nav-link").click(function(){
var me = $(this);
var panel = $('#' + this.hash.substr(1).toLowerCase());
if(me.hasClass("mainTab"))
{
$(".nav-link.active").removeClass("active");
var href=me.attr("href");
$("div.hMain").hide();
$("div.hMain").removeClass("active");
$("div"+href).show();
}
me.parent().addClass('nav-pills');
if(me.hasClass('active')){
$(".nav-link.active").removeClass("active");
me.removeClass('active');
panel.removeClass('active');
return false;
}
});
</script>
答案 1 :(得分：1)
根据问题中的html，如果匹配active的{{1}}，我会根据id添加和删除类href，从而重新创建逻辑。点击element
$(".col-4 .nav-link").on("click", function(){
var curId = $(this).attr("href");
$(".tab-pane").removeClass("active show");
$(".nav-justified .nav-link").removeClass("active");
$(".tab-pane" + curId).addClass("active show");
});