在悬停时显示选项卡式内容

Question

我正在尝试创建一个模块，当用户将鼠标悬停在.header上时，右侧的图像将发生变化。与this page上的“探索馆藏”模块类似。

使用当前的方法，我遇到以下问题：

1. 将鼠标悬停在无效的.header上（即下面示例中的“标头2”）时，我希望用红色圆圈代替黄色圆圈。
悬停在“标题2”上时，
2. “标题1”也仍然处于活动状态（显示.active样式。）

当前方法：

$(document).ready(function(){
	
	$('.tabs__li .header').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('.tab__item').removeClass('active');

		$(this).addClass('active');
		$("#"+tab_id).addClass('active');
	})

	// add class .active on li hover
	$('.tabs__li').mouseenter(function () {
		$('.tab__item').addClass('active');
	});

})

ul.tabs {
  margin: 0;
  padding: 0;
}

span.header{
  color: #ABABAB;
  cursor: pointer;
  font-size: 30px;
  font-weight: bold;
}

.tab__item.active .header{
  color: #454544;
}

span.header:hover{
   color: #454544;
}

.tabbed__left,
.tabbed__right {
   flex-basis: 50%;
}

.tabbed__right{
    display: none;
    min-height: 325px;
    background-repeat: no-repeat;
    background-size: contain;
}
.active .tabbed__right{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>

<div class="tabbed">

  <ul class="tabs d-flex flex-column justify-content-between">
  
    <div class="tab__item d-flex flex-row active">
      <div class="tabbed__left"><li class="tabs__li" data-tab="tab-1"><span class="header">Header 1</span></li></div>
      <div class="tabbed__right" id="tab-1" style="background-image:url(http://oi68.tinypic.com/5a50me.jpg);"></div>
    </div>
      
    <div class="tab__item d-flex flex-row">
      <li class="tabs__li" data-tab="tab-2"><span class="header">Header 2</span></li>
      <div class="tabbed__right" id="tab-2" style="background-image:url(http://oi65.tinypic.com/2zdr4f7.jpg);"></div>
    </div>
    
  </ul>
  
</div>

JSFiddle here for demo

Answer 1

您不会在方法中引用当前的悬停项目，而只是将active类应用于每个元素。

您可以删除所有元素的活动类，然后仅将其应用于引用this的元素（触发事件处理程序的元素）：

$(document).ready(function() {

  $('.tabs__li .header').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('.tab__item').removeClass('active');

    $(this).addClass('active');
    $("#" + tab_id).addClass('active');
  })

  // add class .active on li hover
  $('.tabs__li').mouseenter(function() {
    $('.tab__item').removeClass('active');
    $(this).parents('.tab__item').addClass('active');
    // or alternatively 
    // $(this).closest('.tab__item').addClass('active');

  });

})

ul.tabs {
  margin: 0;
  padding: 0;
}

span.header {
  color: #ABABAB;
  cursor: pointer;
  font-size: 30px;
  font-weight: bold;
}

.tab__item.active .header {
  color: #454544;
}

span.header:hover {
  color: #454544;
}

.tabbed__left,
.tabbed__right {
  flex-basis: 50%;
}

.tabbed__right {
  display: none;
  min-height: 325px;
  background-repeat: no-repeat;
  background-size: contain;
}

.active .tabbed__right {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>

<div class="tabbed">

  <ul class="tabs d-flex flex-column justify-content-between">

    <div class="tab__item d-flex flex-row active">
      <div class="tabbed__left">
        <li class="tabs__li" data-tab="tab-1"><span class="header">Header 1</span></li>
      </div>
      <div class="tabbed__right" id="tab-1" style="background-image:url(http://oi68.tinypic.com/5a50me.jpg);"></div>
    </div>

    <div class="tab__item d-flex flex-row">
      <li class="tabs__li" data-tab="tab-2"><span class="header">Header 2</span></li>
      <div class="tabbed__right" id="tab-2" style="background-image:url(http://oi65.tinypic.com/2zdr4f7.jpg);"></div>
    </div>

  </ul>

</div>

提琴：https://jsfiddle.net/y7rqpjbf/

Answer 2

您可以使用parents jQuery选择器找到单击选项卡并应用active类。

$(document).ready(function(){
	
	$('.tabs__li .header').click(function(){
	 	$('.tab__item').removeClass('active');
		$(this).parents('.tab__item').addClass('active');
	})

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

})

ul.tabs {
  margin: 0;
  padding: 0;
}

span.header{
  color: #ABABAB;
  cursor: pointer;
  font-size: 30px;
  font-weight: bold;
}

.tab__item.active .header{
  color: #454544;
}

span.header:hover{
   color: #454544;
}

.tabbed__left,
.tabbed__right {
   flex-basis: 50%;
}

.tabbed__right{
    display: none;
    min-height: 325px;
    background-repeat: no-repeat;
    background-size: contain;
}
.active .tabbed__right{
  display:block;
}

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>

<div class="tabbed">

  <ul class="tabs d-flex flex-column justify-content-between">
  
    <div class="tab__item d-flex flex-row active">
      <li class="tabs__li" data-tab="tab-1"><span class="header">Header 1</span></li>
      <div class="tabbed__right" id="tab-1" style="background-image:url(http://oi68.tinypic.com/5a50me.jpg);"></div>
    </div>
      
    <div class="tab__item d-flex flex-row">
      <li class="tabs__li" data-tab="tab-2"><span class="header">Header 2</span></li>
      <div class="tabbed__right" id="tab-2" style="background-image:url(http://oi65.tinypic.com/2zdr4f7.jpg);"></div>
    </div>
    
  </ul>
  
</div>

提琴：https://jsfiddle.net/maartendev/ry8g72Lz/5/