javascript - 根据条件在悬停时添加类名

Question

我创建了一个选项卡式模块，它通过获取 .content div(隐藏)中的内容并将其显示在名为 .overview 的空 div 中来工作>.

这个选项卡式模块背后的想法是，在悬停时(或当类 active 存在时)，右侧的内容将根据从左侧选择的标题进行更改。 IE。如果我将鼠标悬停在名为“Red”的标题上，右侧的 .overview div 将显示“red”。

但是，我遇到的问题如下:

1. 在下面的演示中，不要将鼠标悬停在任何标题上。 .overview div 没有内容——这显然不理想。如果 .tabs 有类 .active，那么我希望它的内容显示在右边。我有一个计数器运行，每 5 秒更改一次事件类。我不只是想在悬停时显示内容。

2. 综上所述，如果我将鼠标悬停在另一个 tabs div 上，我希望计数器停止 - 以防止它向另一个 active 添加类 .tabs div(因为悬停在 tabs 上是事件的。

演示:

$(document).ready(function() {

  //  add class .active on li hover
  $('.tabs').mouseenter(function() {
    //$('.tabs').removeClass('active');
    $(this).parents('.tabs').addClass('active');
  });


  // Change active tab every x seconds
  $(function() {
    var list = $(".tabs"),
      currentActive = 0;
    time = 5; // interval in seconds
    setInterval(function() {
      currentActive = (currentActive + 1) % list.length;
      list.removeClass('active').eq(currentActive).addClass('active');
    }, time * 1000);
  });

})

var overview = $('.overview');

$('.tabs').each(function(i) {
  var thisTab = $(this);
  var thisContent = thisTab.find('.content').html();

  // when class .active exists, change content in .overview
  if ($('.tabs').hasClass('active')) {
    overview.html(thisContent);
  }


  // on hover, change content in .overview
  thisTab.on('mouseenter', function(e) {
      thisTab.addClass('active');
      overview.html(thisContent);
    })
    .on('mouseleave', function(e) {
      thisTab.removeClass('active');
      overview.html('');
    });

});

.tabs.active {
  background: none yellow;
}

.list {
  flex-basis: 40%;
}

.list li {
  list-style-type: none;
}

.overview {
  flex-basis: 60%;
  border: 1px solid blue;
}

.content {
  display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="d-flex flex-row">
  <div class="list">

    <li class="tabs active">
      <div class="header"><span>Header</span></div>
      <div class="content">
        <p>Content 1</p>
      </div>
    </li>

    <li class="tabs">
      <div class="header"><span>Header 2</span></div>
      <div class="content">
        <p>Content 2</p>
      </div>
    </li>

    <li class="tabs">
      <div class="header"><span>Header 3</span></div>
      <div class="content">
        <p>Content 3</p>
      </div>
    </li>

  </div>
  <div class="overview"> </div>
</div>

编辑:

我已经设法在问题 1 上取得了一些进展。我添加了:

 if ($('.tabs').hasClass('active')) {
     overview.html(thisContent);
  }

现在，无需悬停，在 .overview 中显示内容，但是，当另一个选项卡处于 .active 时，内容不会改变(即在演示中，不要将鼠标悬停在任何内容上，稍等，它只显示所有标题的内容 3。

Answer 1

我将执行以下操作(我已经评论了我所做的更改)

$(document).ready(function() {
  var list = $(".tabs"),
    overview = $('.overview'),
    autoInterval,                                    // interval var
    currentActive = 0;                               // make this global to this closure


  overview.html(list.eq(0).find('.content').html()); // set overview content
  startInterval();                                   // start interval straight away

  //  add class .active on li hover
  list.mouseenter(function() {
    var thisTab = $(this);

    currentActive = list.index(this);                // set current active
    list.removeClass('active');                      // remove active class
    thisTab.addClass('active');                      // add active class
    clearInterval(autoInterval);                     // clear the interval whilst hovering

    var thisContent = thisTab.find('.content').html(); // get content
    overview.html(thisContent);                        // set overview content
  });

  list.mouseleave(function() {
    startInterval();                                  // restart the interval on mouseleave
  });

  function startInterval() {
    // Change active tab every x seconds
    time = 5; // interval in seconds
    autoInterval = setInterval(function() {
      currentActive = (currentActive + 1) % list.length;
      list.removeClass('active');
      var currentTab = list.eq(currentActive);
      currentTab.addClass('active');
      overview.html(currentTab.find('.content').html()); // set overview content
    }, time * 1000);
  }
});

.tabs.active {
  background: none yellow;
}

.list {
  flex-basis: 40%;
}

.list li {
  list-style-type: none;
}

.overview {
  flex-basis: 60%;
  border: 1px solid blue;
}

.content {
  display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="d-flex flex-row">
  <div class="list">

    <li class="tabs active">
      <div class="header"><span>Header</span></div>
      <div class="content">
        <p>Content 1</p>
      </div>
    </li>

    <li class="tabs">
      <div class="header"><span>Header 2</span></div>
      <div class="content">
        <p>Content 2</p>
      </div>
    </li>

    <li class="tabs">
      <div class="header"><span>Header 3</span></div>
      <div class="content">
        <p>Content 3</p>
      </div>
    </li>

  </div>
  <div class="overview"> </div>
</div>