隱藏不懸停 - BOOTSTRAP TOGGABLE PILLS

我正在使用引導可切換的藥片，並對其進行了一些修改以使其垂直工作。隱藏不懸停 - BOOTSTRAP TOGGABLE PILLS

我希望當我活下去的藥丸時，contant-tab消失。

我試過了，但不起作用。

這裏是我的代碼：

<div class="container" style="width:80%; height:720px; padding:0; margin:0;"> 
    <ul class="nav nav-pills nav-stacked col-md-2" id="pills-first" style="padding:120px 0px 120px 0px;"> 
     <li><a href="#tab_a" style="padding:20px 0px 20px 0px; text-align:center;"><img src="images/gallery-learn.png" style="width:80px; height:80px; margin:0; padding:0;"></a></li> 
     <li><a href="#tab_b" style="padding:20px 0px 20px 0px; text-align:center;"><img src="images/gallery-speak.png" style="width:80px; height:80px; margin:0; padding:0;"></a></li> 
     <li><a href="#tab_c" style="padding:20px 0px 20px 0px; text-align:center;"><img src="images/gallery-read.png" style="width:80px; height:80px; margin:0; padding:0;"></a></li> 
     <li><a href="#tab_d" style="padding:20px 0px 20px 0px; text-align:center;"><img src="images/gallery-write.png" style="width:80px; height:80px; margin:0; padding:0;"></a></li> 
    </ul> 
    <div class="tab-content col-sm-6" style="margin:0; padding:0;"> 
     <div class="tab-pane fade active" id="tab_a" style="background-color:rgba(0, 0, 0, 0.5); height:600px; margin:60px 0px 60px 0px; padding:10px 10px 0px 10px;"> 
      <h4>Pane A</h4> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
     </div> 
     <div class="tab-pane fade" id="tab_b" style="background-color:rgba(0, 0, 0, 0.5); height:600px; margin:60px 0px 60px 0px; padding:10px 10px 0px 10px;"> 
      <h4>Pane B</h4> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
     </div> 
     <div class="tab-pane fade" id="tab_c" style="background-color:rgba(0, 0, 0, 0.5); height:600px; margin:60px 0px 60px 0px; padding:10px 10px 0px 10px;"> 
      <h4>Pane C</h4> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
     </div> 
     <div class="tab-pane fade" id="tab_d" style="background-color:rgba(0, 0, 0, 0.5); height:600px; margin:60px 0px 60px 0px; padding:10px 10px 0px 10px;"> 
      <h4>Pane D</h4> 
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
     </div> 
    </div><!-- tab content --> 
</div><!-- end of container -->

和這個JS

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js</script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script> 
<script> 
    $('#pills-first a').hover(function (e) { 
     e.preventDefault() 
     $(this).tab('show') 
    }); 
</script>

我怎樣才能做到這一點？

來源

2016-09-14 ALEXM

什麼的preventDefault的懸停的原因是什麼？ –

嘗試擺放一種風格：無;當你想要顯示時，將css「none」改爲「block」。

使用

$("#pill-first a").css("display" : "block")

來源

2016-09-14 07:09:26

常用選項卡保持隱藏狀態，並且不會在懸停時顯示 – ALEXM

哦，您還沒有在上面的代碼中結束您的jquery語句。 –

使用$（「＃pills-first a」）。css（{「display」：「block」}）; –

隱藏不懸停 - BOOTSTRAP TOGGABLE PILLS

回答

相關問題