Question

我使用Twitter Bootstrap可以切换标签。我的问题是我的.tab-content被隐藏了，我想在鼠标指针进入.nav-tabs > li时显示它，并在鼠标指针离开元素时隐藏它。

这是我的代码：

      <div role="tabpanel" class="tabpanel">
          <div class="container">
            <!-- company tabs -->
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation">
                <a href="#sigma" aria-controls="sigma" role="tab" data-toggle="tab" class="boxopacity">
                  <span>TAb1</span>
                </a>
              </li>
              <li role="presentation">
              <a href="#alpek" aria-controls="alpek" role="tab" data-toggle="tab" class="boxopacity">
                  <span>TAb2</span>
                </a>
              </li>
              <li role="presentation">
                <a href="#nemak" aria-controls="nemak" role="tab" data-toggle="tab" class="boxopacity">
                  <span>TAb3</span>
                </a>
              </li>
            </ul><!-- .end company tabs -->

            <!-- company information -->
            <div class="tab-content">
              <!-- company sigma -->
              <div role="tabpanel" class="tab-pane fade" id="sigma">
                <div class="box largebox">
                  <div class="content">
                    <h5>Tab1</h5>
                  </div>
                </div>
                <div class="box mediumbox">
                  <div class="content">
                    <h6>Productos principales</h6>

                    <h6>Mercados</h6>
                    <ul>
                      <li>Alimentos</li>
                    </ul>
                  </div>
                </div>
                <div class="box mediumbox">
                  <div class="content">
                    <h6>Cifras relevantes</h6>
                    <ul class="relevant">
                    </ul>
                  </div>
                </div>
                <div class="box mediumbox">
                </div>
              </div>

              <!-- company alpek -->
              <div role="tabpanel" class="tab-pane fade" id="alpek">
                <div class="box largebox">
                  <div class="content">
                    <h5>Tab2</h5>
                  </div>
                </div>
                <div class="box mediumbox">
                  <div class="content">
                    <h6>Productos principales</h6>

                    <h6>Mercados</h6>
                  </div>
                </div>
                <div class="box mediumbox">
                  <div class="content">
                    <h6>Cifras relevantes</h6>
                    <ul class="relevant">
                      <li>Plantas</li>
                    </ul>
                  </div>
                </div>
                <div class="box mediumbox">
                </div>
              </div>

              <!-- company nemak -->
              <div role="tabpanel" class="tab-pane fade" id="nemak">
                <div class="box largebox">
                  <div class="content">
                    <h5>Tab3</h5>
                  </div>
                </div>
                <div class="box mediumbox">
                  <div class="content">
                    <h6>Productos principales</h6>

                    <h6>Mercados</h6>
                    <ul>
                      <li>Automortiz.</li>
                    </ul>
                  </div>
                </div>
                <div class="box mediumbox">
                  <div class="content">
                    <h6>Cifras relevantes</h6>
                    <ul class="relevant">
                    </ul>
                  </div>
                </div>
                <div class="box mediumbox">
                </div>
              </div>
            </div><!-- .end company information -->
          </div>
        </div>

我的Jquery：

<script>
    $(document).ready(function (){
      $('.nav-tabs > li > a').hover(function () {
        $(this).tab('show');
        }, function () {
      });        
    });
  </script>

Answer 1

你可以用mouseenter＆amp;像我刚刚创建的小提琴一样：

http://jsfiddle.net/jep0n6p9/3/

jQuery

$( '.nav-tabs' ).mouseenter( handlerIn );
$( '.tab-content' ).mouseleave( handlerOut );

function handlerIn() {
    $('.tab-content').show();
}

function handlerOut() {
    $('.tab-content').hide();
}

Answer 2

请在nav-tab上使用mouseleave事件隐藏标签内容。
请检查此链接：http://jsfiddle.net/yLq1df22/

希望这可能对您有所帮助。

Bootstrap Togglable标签。当我将鼠标悬停在`.nav-tabs＆gt;上时，如何显示.tab-pane内容？ li`，然后鼠标离开时隐藏内容？

2 个答案: