Twitter bootstrap 引导多个可切换选项卡内容';s
很抱歉,如果这是一个愚蠢的问题,但从我的代码中,您应该能够看到,从外行的角度来看,我试图使它成为这样,一旦您单击“教育”选项卡,两个选项卡窗格元素都会出现。我知道它现在出现了,因为它正在找到第一个并停在那里,但每次我试着放我自己的脚本,它都不起作用 我无法将代码粘贴到提供的框中,因为格式设置变得疯狂(缩进),但这里是Twitter bootstrap 引导多个可切换选项卡内容';s,twitter-bootstrap,Twitter Bootstrap,很抱歉,如果这是一个愚蠢的问题,但从我的代码中,您应该能够看到,从外行的角度来看,我试图使它成为这样,一旦您单击“教育”选项卡,两个选项卡窗格元素都会出现。我知道它现在出现了,因为它正在找到第一个并停在那里,但每次我试着放我自己的脚本,它都不起作用 我无法将代码粘贴到提供的框中,因为格式设置变得疯狂(缩进),但这里是 <body data-spy="scroll" data-target="#myTab"> <div class="container" style="backg
<body data-spy="scroll" data-target="#myTab">
<div class="container" style="background:#404040;>
<div class="row">
<div class="col-md-12" style="background:#707070;">
<div class="btn-group btn-group-justified">
<ul class="nav" id="myTab">
<li><a href="#commercial" data-toggle="tab">Commercial</a></li>
<li><a href="#residential" data-toggle="tab">Residential</a></li>
<li><a href="#educational" data-toggle="tab">Educational</a></li>
</ul>
</div>
<div class="col-md-9" style="background:#101010; height:1000px; margin-bottom:10px;">
<div class="tab-content">
<div class="tab-pane fade" id="educational">
this should be hidden
</div>
</div>
</div>
<div class="col-md-3">
<div id="fixednav">
<div class="tab-content">
<div class="tab-pane fade active in" id="commercial">
<ul class="nav">
<li class="active" ><a href="#house">MAYTIME INN, BURFORD</a></li>
<li><a href="#house1">CIRENCESTER BUSINESS PARK</a></li>
<li><a href="#house2">SHOTTERY BROOK BUSINESS PARK</a></li>
<li><a href="#house2">SPRINGFIELD BUSINESS PARK</a></li>
<li><a href="#house2">RANELAGH TERRACE</a></li>
<li><a href="#house2">TESCO EXPRESS MEASHAM</a></li>
<li><a href="#house2">PRIMROSE HOSPICE</a></li>
</ul>
</div>
<div class="tab-pane fade" id="residential">
<ul class="nav">
<li class="active" ><a href="#house">PENDEEN ROAD</a></li>
<li><a href="#house2">LILLINGTON ROAD, LEAMINGTON SPA</a></li>
<li><a href="#house2">BROADWAY COTTAGES, CHALGROVE</a></li>
<li><a href="#house2">CLARENDON PLACE, LEAMINGTON SPA</a></li>
<li><a href="#house2">MILL HOLLOW, DORRIDGE</a></li>
<li><a href="#house2">THE CRICKETERS, DORRIDGE</a></li>
<li><a href="#house2">HARVINGTON COURT</a></li>
</ul>
</div>
<div class="tab-pane fade" id="educational">
<ul class="nav">
<li class="active" ><a href="#house">NEWBOTTLE AND CHARLTON C of E PRIMARY SCHOOL</a></li>
<li><a href="#house2">ILMINGTON C of E PRIMARY SCHOOL</a></li>
<li><a href="#house2">ALDRIDGE SCHOOL</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
您只能在页面上使用id一次,您使用id=“educational”两次,这就是它不起作用的原因。你为什么不把它分成这样一个大的标签呢
<div class="row">
<div class="col-md-12" style="background:#707070;">
<div class="btn-group btn-group-justified">
<ul class="nav" id="myTab">
<li><a href="#commercial" data-toggle="tab">Commercial</a></li>
<li><a href="#residential" data-toggle="tab">Residential</a></li>
<li><a href="#educational" data-toggle="tab">Educational</a></li>
</ul>
</div>
<div class="tab-content">
<div class="col-md-3 col-md-offset-9 tab-pane fade active in" id="commercial">
<div id="fixednav">
<ul class="nav">
<li class="active"><a href="#house">MAYTIME INN, BURFORD</a></li>
<li><a href="#house1">CIRENCESTER BUSINESS PARK</a></li>
<li><a href="#house2">SHOTTERY BROOK BUSINESS PARK</a></li>
<li><a href="#house2">SPRINGFIELD BUSINESS PARK</a></li>
<li><a href="#house2">RANELAGH TERRACE</a></li>
<li><a href="#house2">TESCO EXPRESS MEASHAM</a></li>
<li><a href="#house2">PRIMROSE HOSPICE</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-md-offset-9 tab-pane fade" id="residential">
<ul class="nav">
<li class="active"><a href="#house">PENDEEN ROAD</a></li>
<li><a href="#house2">LILLINGTON ROAD, LEAMINGTON SPA</a></li>
<li><a href="#house2">BROADWAY COTTAGES, CHALGROVE</a></li>
<li><a href="#house2">CLARENDON PLACE, LEAMINGTON SPA</a></li>
<li><a href="#house2">MILL HOLLOW, DORRIDGE</a></li>
<li><a href="#house2">THE CRICKETERS, DORRIDGE</a></li>
<li><a href="#house2">HARVINGTON COURT</a></li>
</ul>
</div>
<div class="tab-pane fade" id="educational">
<div class="col-md-9" style="background:#101010; height:1000px; margin-bottom:10px;">
this should be hidden
</div>
<div class="col-md-3">
<ul class="nav">
<li class="active"><a href="#house">NEWBOTTLE AND CHARLTON C of E PRIMARY SCHOOL</a></li>
<li><a href="#house2">ILMINGTON C of E PRIMARY SCHOOL</a></li>
<li><a href="#house2">ALDRIDGE SCHOOL</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
这应该隐藏起来
+1这对我今天很有帮助……是的@joshhunt你是对的,我们必须为所有标签组提供不同的id及其工作状态,谢谢。。