我在jquery中有三个选项卡可以显示和隐藏。方案是在加载页面时，所有三个选项卡同时显示。但是，当我单击第二个选项卡时，其他两个选项卡的隐藏方式与我想要的完全相同。我想要在加载页面时，只显示第一个选项卡，不应显示其他两个选项卡。请参阅代码供您参考： -
javascript代码： -
<script src='assets/js/swipe.js'></script>
<script type="text/javascript">
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide: 4,
auto: 3000,
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: function(index, element) {},
transitionEnd: function(index, element) {}
});
var elem = document.getElementById('mySwipe1');
window.mySwipe1 = Swipe(elem, {
startSlide: 4,
auto: 3000,
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: function(index, element) {},
transitionEnd: function(index, element) {}
});
var elem = document.getElementById('mySwipe2');
window.mySwipe2 = Swipe(elem, {
startSlide: 4,
auto: 3000,
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: function(index, element) {},
transitionEnd: function(index, element) {}
});
<ul class="nav nav-tabs tabs">
<li class="active"><a href="#services" data-toggle="tab">Interiors</a></li>
<li><a href="#products" data-toggle="tab">Culture</a></li>
<li><a href="#products1" data-toggle="tab">CSR</a></li>
</ul>
标签的HTML。
<div class="tab-content">
<div class="tab-pane active service-detail01" id="services">
<div class="container-fluid margin-bottom-50 clearfix" style="padding-left: 0px">
<div class="span4">
<!--<div class="service-img"><img src="assets/images/bs-pg/service-dummy-img.jpg" /></div>-->
<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div><b><img src="assets/images/interiors/Career-Images.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/interiors/Monitoring_Live-Monitoring-Station-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/interiors/Monitoring_The-Active-Deterrence-Station-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/interiors/Monitoring_The-Command-and-Control-Center-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/interiors/Ther-Corporate-Office-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/interiors/The-Securens-Lobby-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/interiors/The-Support-Department-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/interiors/Training-Room.jpg" alt="Securens" title="Securens"></b></div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
</div>
</div>
<div class="span4">
<h3 style="line-height:16px; height:50px;">Celebrations</h3>
<p>Securens celebrates festivals and other special occasions with Fun and Frolic.</p>
</div>
</div>
</div>
<div class="tab-pane active service-detail01" id="products">
<div class="container-fluid margin-bottom-50 clearfix" style="padding-left: 0px">
<div class="span4">
<div id='mySwipe1' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div><b><img src="assets/images/culture/Core-Group-Meeting-in-Progress.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/culture/HR-Meeting-in-Progress-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/culture/Team-Securens-Mixed-Team-1-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/culture/Team-Securens-Team-3-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/culture/The-Football-Cafe-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe1.prev()'>prev</button>
<button onclick='mySwipe1.next()'>next</button>
</div>
</div>
<div class="span4">
<h3 style="line-height:16px; height:50px;">Culture</h3>
<p>We believe in thriving in a fun and producing atmosphere.</p>
</div>
</div>
</div>
<div class="tab-pane active service-detail01" id="products1">
<div class="container-fluid margin-bottom-50 clearfix" style="padding-left: 0px">
<div class="span4">
<!--<div class="service-img"><img src="assets/images/bs-pg/service-dummy-img.jpg" /></div>-->
<div id='mySwipe2' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div><b><img src="assets/images/CSR/Banglore.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/CSR/Chennai.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/CSR/Delhi.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/CSR/Delhi-2.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/CSR/Kolkatta.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/CSR/Mumbai1.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/CSR/Mumbai2.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/CSR/Mumbai3.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/CSR/Mumbai4.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/CSR/Pune1.jpg" alt="Securens" title="Securens"></b></div>
<div><b><img src="assets/images/CSR/Pune2.jpg" alt="Securens" title="Securens"></b></div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe2.prev()'>prev</button>
<button onclick='mySwipe2.next()'>next</button>
</div>
</div>
<div class="span4">
<!--<div class="service-img"><img src="assets/images/bs-pg/service-dummy-img.jpg" /></div>-->
<h3 style="line-height:16px; height:50px;">CSR</h3>
<p>Our teams are about enthusiastic about Social Responsibility Initiatives.</p>
</div>
</div>
</div>
答案 0 :(得分：1)
您可以直接在文档就绪事件
上使用jQuery隐藏和显示事件$(document).ready(function(){
$(".tab-pane").hide();
$("#services).show();
});
还在每个列表项上绑定onclick事件，以将相应的选项卡显示为：
function showTab(tabName){
$(".tab-pane").hide();
$("#"+tabName).show();
}
或者直接在文档事件中将其绑定到每个列表上的on-click事件-item
$(document).ready(function(){
$(".tab-pane").hide();
$("#services").show();
$("#first_li").click(function(){
showTab('services');
});
$("#second_li").click(function(){
showTab('products');
});
$("#third_li").click(function(){
showTab('products1');
});
});
并将列表项命名为：
<ul class="nav nav-tabs tabs">
<li class="active" id="first_li"><a href="#services" data-toggle="tab">Interiors</a></li>
<li id="second_li"><a href="#products" data-toggle="tab">Culture</a></li>
<li id="third_li"><a href="#products1" data-toggle="tab">CSR</a></li>
</ul>
答案 1 :(得分：0)
如何简单地添加一些
style="display: none;"
到第二个和第三个标签？
在滑动时删除该样式。
或者说＆＃34;隐藏＆＃34;使用所需样式对选项卡进行分类，并在滑动时切换此类。
编辑：
可能不是最好的解决方案，但适合第一个......
<ul class="nav nav-tabs tabs">
<li class="active"><a href="#services" data-toggle="tab" onclick="jQuery('.tab-pane').hide(); jQuery('#services').show();">Interiors</a></li>
<li><a href="#products" data-toggle="tab" onclick="jQuery('.tab-pane').hide(); jQuery('#products').show();">Culture</a></li>
<li><a href="#products1" data-toggle="tab" onclick="jQuery('.tab-pane').hide(); jQuery('#products1').show();">CSR</a></li>
</ul>