Jquery选项卡onload hide

我在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) {}
        });

var elem=document.getElementById（'mysweep'）；
window.myswip=滑动（元素{
开始滑动：4，
汽车：3000，
是的，
disableScroll:正确，
stopPropagation：是的，
回调：函数（索引，元素）{}，
transitionEnd:函数（索引，元素）{}
});
var elem=document.getElementById（'mysweep1'）；
window.mySwipe1=滑动（元素{
开始滑动：4，
汽车：3000，
是的，
disableScroll:正确，
stopPropagation：是的，
回调：函数（索引，元素）{}，
transitionEnd:函数（索引，元素）{}
});
var elem=document.getElementById（'mysweep2'）；
window.mySwipe2=滑动（元素{
开始滑动：4，
汽车：3000，
是的，
disableScroll:正确，
stopPropagation：是的，
回调：函数（索引，元素）{}，
transitionEnd:函数（索引，元素）{}
});

选项卡的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>

上
下一个
庆祝活动
Securens以娱乐和嬉戏的方式庆祝节日和其他特殊场合

上
下一个
文化
我们相信在一个充满乐趣和创造力的环境中成长

上
下一个
企业社会责任
我们的团队热衷于社会责任倡议

---

您可以在document ready事件上直接使用jQuery隐藏和显示事件

$(document).ready(function(){
    $(".tab-pane").hide();
    $("#services).show();
});

还绑定每个列表项上的onclick事件，以将相应的选项卡显示为：

function showTab(tabName){
  $(".tab-pane").hide();
  $("#"+tabName).show();
}

或者在每个列表项上的单击事件的文档事件中直接绑定它

$(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>

简单地添加一些

style="display: none;"

到第二个和第三个选项卡

然后在轻扫时删除该样式

或者将一个“隐藏”类放在具有所需样式的选项卡上，并在滑动时切换该类

编辑：

可能不是最好的解决方案，但适用于第一个

 <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>

我这样做了，并将div样式设置为display:none，你能告诉我如何在刷卡时删除该样式吗？要获得有关资源和代码的进一步帮助，a将非常好。你的小提琴需要指向swipe.js文件的路径。。。如果没有javascript，就不可能检查javascript，因为它会出错。我没有时间自己搜索…添加了swipe.js的代码，请查看更新的js fiddle:Look this。很抱歉，现在开始工作，除了分享外，无法做更多。嗨，阿卡什，你能为同样的内容编写代码吗，因为我有点困惑我用你的代码试过了，但是onload整个选项卡都隐藏了，在第二个和第三个选项卡上也没有显示。仍然无法在页面加载上工作，第二个选项卡工作正常，单击hi-akash，我在javascript问题上的代码需要与所有其他东西一起存在。我认为这就是它不工作的原因是的，这可能是原因，否则最后一把小提琴工作正常（在页面加载时显示第一个选项卡，在事件单击时显示其余选项卡）

 <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>