Вкладки начальной загрузки при наведении курсора мыши по ссылкам

Question

Я использую функциональность вкладок начальной загрузки, и я хотел бы реализовать следующие функции:

1. Используйте mouseenter вместо щелчка, чтобы переключаться между вкладками
2. Чтобы предотвратить действие нажатия на ссылки.

Вот мой пример кода jsfiddle. https://jsfiddle.net/irider89/bmLpwtqb/3/

$('.nav li a').hover(function (e) {
    e.preventDefault()
    $(this).tab('show');
});

$('.nav li a').click(function (e) {
    return true;
});

Как этого можно достичь?

Мне нужно, чтобы я мог щелкнуть пункты основного меню (Домой, Профиль, Сообщения, Настройки) и перейти на конкретный URL.

Answer 1

Не использовать window.location.href = ... метод! Средний щелчок мыши не будет работать.

---

1) Переключение при наведении. Привязать простой обработчик мыши к объекту документа:

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

---

2) Предотвратить щелчок. Лучше использовать .off('click', ...) метод для сброса встроенного обработчика Bootstrap вместо написания пользовательского обработчика кликов, имеющего дело с пользовательским атрибутом данных. Вот так:

$(document).off('click.bs.tab.data-api', '[data-toggle="tab"]');

Тогда используй родной href указать внешнюю ссылку и data-target указать на панель содержимого.

---

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

демонстрация

Answer 2

Используйте новый атрибут "data-", чтобы упомянуть URL, как показано ниже

<a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-href="www.google.com">Home</a>

и использовать скрипт, как это

 $('.nav li a').on("click",function (e) {
          window.location.href = $(this).attr("data-href");
    });

Answer 3

Используйте это, чтобы перейти по URL:

$('.nav li a').click(function (e) {
   window.location.href = $(this).attr("href");
});

Answer 4

Вы можете просто использовать этот код для реализации этой функции № 1, меняя вкладки при наведении

$('.nav-tabs li').hover(function(){
    $('.nav-tabs li a').removeClass('active show');
    $(this).children('a').addClass('active show');
    var href = $(this).children('a').attr('href');
    href = href.substr(1);
    $('.tab-pane').removeClass('active show');
    $('#'+href).addClass('active show');
});

для следующей функции добавьте этот код, чтобы отключить клик

$('.nav-tabs li').click( function(e){
    e.prevenetDefault(); 
}

Answer 5

Попробуй это:

      //first, we need to show tab-content on mouseover
$(".nav-link").mouseover( function() {
    $(this).tab("show");
});

// on hovering quickly, need to remove the active class from the related tab panel
$(".nav-link").on("show.bs.tab", function(e) {
    const tabPanelId = e.relatedTarget.getAttribute("href");
    $(tabPanelId).removeClass("active");
});

Answer 6

Приведенные выше ответы не сработали полностью. Демо-версия TonyStar быстро ломается, когда пользователь быстро перемещается между вкладками. Код был обновлен, чтобы добавить задержку, чтобы избежать этой проблемы. Добавьте атрибут data-url="" к любой вкладке, на которую вы хотите перейти по ссылке на веб-сайт при нажатии.

      <script>
  (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() {
        var $this = $(this);
        if (!$this.hasClass('active') && !$this.hasClass('disabled')) {
          var delay = setTimeout(function() {
            $this.tab('show');
          }, 150);
          $this.data('tab-delay', delay);
        }
      }).on('mouseleave.bs.tab.data-api', '[data-toggle="tab"], [data-hover="tab"]', function() {
        var $this = $(this);
        clearTimeout($this.data('tab-delay'));
      }).on('click', '[data-hover="tab"]', function() {
        var $this = $(this);
        var url = $this.data('url');
        if (url) {
          window.location.href = url;
        }
      });
    });
  })(jQuery);
</script>