Как сделать с помощью твиттера загрузочные вкладки при наведении курсора вместо нажатия? - PullRequest
Новая
       42

Как сделать с помощью твиттера загрузочные вкладки при наведении курсора вместо нажатия?

18 голосов
/ 22 марта 2012

Я наконец-то получил вкладки Bootstrap для работы.Мне было интересно, есть ли способ изменить поведение, чтобы вместо щелчка, просто навести курсор мыши, отобразился скрытый контент?

Ответы [ 6 ]

29 голосов
/ 28 марта 2012

В вашем $(document).ready или в другом месте ...

положите что-то вроде этого: 

$('.nav-tabs > li > a').hover(function() {
  $(this).tab('show');
});

Вам не нужно изменять основной загрузочный код.

Дополнительно вы можете сделать это: 

$('.nav-tabs > li ').hover(function() {
  if ($(this).hasClass('hoverblock'))
    return;
  else
    $(this).find('a').tab('show');
});

$('.nav-tabs > li').find('a').click(function() {
  $(this).parent()
    .siblings().addClass('hoverblock');
});

Что предотвратит выбор при наведении курсора после первого нажатия пользователем вкладки.

11 голосов
/ 22 июня 2015

Лучше привязать обработчик к объекту документа, чтобы он также работал с динамически генерируемыми вкладками: 

$(document).on('mouseenter', '[data-toggle="tab"]', function () {
  $(this).tab('show');
});

Также есть небольшой плагин Bootstrap, который автоматически активирует вкладки при наведении: https://github.com/tonystar/bootstrap-hover-tabs.

Полный HTML-код с использованием этого плагина: 

body { padding: 2rem; }
.tab-content { margin-top: 1.5rem; }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Nav pills -->
<ul class="nav nav-pills">
  <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1</a></li>
  <li><a href="#tab-2" data-toggle="tab">Tab 2</a></li>
  <li><a href="#tab-3" data-toggle="tab">Tab 3</a></li>
  <li><a href="#tab-4" data-toggle="tab">Tab 4</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content well">
  <div class="tab-pane active" id="tab-1">Content 1</div>
  <div class="tab-pane" id="tab-2">Content 2</div>
  <div class="tab-pane" id="tab-3">Content 3</div>
  <div class="tab-pane" id="tab-4">Content 4</div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.rawgit.com/tonystar/bootstrap-hover-tabs/v3.1.1/bootstrap-hover-tabs.js"></script>
2 голосов
/ 07 августа 2013

JavaScript:

В вашем $ (документе) .ready или в другом месте ...
вставьте что-то вроде этого: 

$('.nav-tabs[data-toggle="tab-hover"] > li > a').hover( function(){
    $(this).tab('show');
});

HTML: 

<ul class="nav nav-tabs" data-toggle="tab-hover">
    ....
</ul>
1 голос
/ 22 марта 2012

Изменить bootstrap.js (или boostrap-tab.js, если вы не используете полный файл bootstrap.js)

Где вы видите: 

 /* TAB DATA-API
  * ============ */

  $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
  })

изменить 'click.tab.data-api' на 'hover.tab.data-api'

Примечание: я проверял это с Bootstrap v2.0.2

0 голосов
/ 12 июня 2018

Я надеюсь, что это хорошее решение 

(function ($) {
  $(function () {
    $(document).off('click.bs.tab.data-api', '[data-hover="tab"]');
    $(document).on('mouseenter.bs.tab.data-api', '[data-toggle="tab"], [data-hover="tab"]', function () {
      $(this).tab('show');
    });
  });
})(jQuery);
0 голосов
/ 05 июня 2018

Прямо из моего производственного кода. Ортогональный, ненавязчивый, может «отклеить» любой пользовательский интерфейс. Селектор может быть изменен для соответствия многим видам кликабельности. 

$(document).on('mouseover','.js-mouseover-to-click',function (event) {
    $(event.target).trigger('click');
});
...