javascript - 隐藏而不是悬停 - BOOTSTRAP TOGGABLE PILLS

Question

我正在使用 bootstrap toggable pill 并进行一些修改以垂直工作。

我希望当我服用药丸时 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>

我该怎么做？

Answer 1

尝试放置一种显示样式:无；然后在您希望显示时将 css“无”更改为“阻止”。

使用

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