Форум

nikoshot · #1 (**permalink**) 15.05.2019, 13:15

Работает так что при наведении на блок .tab_item добавляет class active
если наведения нет то класс убераем..

Как сделать что бы у первого блока класс active возвращался если я вообще убрал наведние с этого блока

есть html код

<div class="tabs">
                    <div class="tab_item tab_item_1 active">
                        <div class="tab_name">текст 1</div>
                    </div>
                    <div class="tab_item tab_item_2">
                        <div class="tab_name">текст 2</div>
                    </div>
                    <div class="tab_item tab_item_3">
                        <div class="tab_name">текст 3</div>
                    </div>
                </div>

и есть js

$('.tab_item').hover(function() {
            $(this).addClass('active');
        }, function() {
            $( this ).removeClass('active');
        });

Вот тут все видно как работет.. https://jsfiddle.net/nikoshot/w5ohLts7/4/

ksa · #2 (**permalink**) 15.05.2019, 13:35

Сообщение от nikoshot

Как сделать что бы у первого блока класс active возвращался если я вообще убрал наведние с этого блока

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.tabs {
	border: 1px solid;
}
.active {
	color: red;
}
</style>
<script type='text/javascript'>
$(function(){
	$('.tabs').mouseleave(function(){
		var o=$(this).children();
		o.removeClass('active');
		o.eq(0).addClass('active');
	});
	$('.tab_item').hover(function() {
		var o=$(this);
		o.parent().children().removeClass('active');
		o.addClass('active');
	}, function() {
		$( this ).removeClass('active');
	});
});
</script>
</head>
<body>
<div class="tabs">
	<div class="tab_item tab_item_1 active">
		<div class="tab_name">текст 1</div>
	</div>
	<div class="tab_item tab_item_2">
		<div class="tab_name">текст 2</div>
	</div>
	<div class="tab_item tab_item_3">
		<div class="tab_name">текст 3</div>
	</div>
</div>
</body>
</html>

nikoshot · #3 (**permalink**) 15.05.2019, 13:45

Спасибо, круто) Но мне нужно с ипользованием jquery
Так как с ангуляром вообще не дружу.. а подключать два скрипта для реализации одного ефекта не очень хочется, но спасибо)

ksa · #4 (**permalink**) 15.05.2019, 14:39

Сообщение от nikoshot

Но мне нужно с ипользованием jquery

Так я так и сделал...

Сообщение от nikoshot

Так как с ангуляром вообще не дружу.. а подключать два скрипта для реализации одного ефекта не очень хочется

Ангуляра нет в примере.

nikoshot · #5 (**permalink**) 15.05.2019, 15:17

Спасибо работает)
Про ангуляр я увидело вот эти срипты и подумал что это на нем..

<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>

ksa · #6 (**permalink**) 15.05.2019, 15:51

Сообщение от nikoshot

я увидело вот эти срипты

Они закоментированны, отключены и не работают в этом примере.

Malleys · #7 (**permalink**) 15.05.2019, 20:05

Вот ещё вариант...

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
      .tabs {
        border: 1px solid;
      }

      .tabs:not(:hover) .tab_item.active, .tab_item:hover {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="tabs">
      <div class="tab_item tab_item_1 active">
        <div class="tab_name">текст 1</div>
      </div>
      <div class="tab_item tab_item_2">
        <div class="tab_name">текст 2</div>
      </div>
      <div class="tab_item tab_item_3">
        <div class="tab_name">текст 3</div>
      </div>
    </div>
  </body>
</html>

nikoshot · #8 (**permalink**) 23.05.2019, 11:26

Сообщение от Malleys

Вот ещё вариант...

<!doctype html>
    <style>
      .tabs {
        border: 1px solid;
      }

      .tabs:not(:hover) .tab_item.active, .tab_item:hover {
        color: red;
      }
    </style>

Снова понадобилось это решение.. смотрю твой способ вообще на ура)

Дай бог тебе здоровья и успехов)
Спасибо!

Форум

Справочник

Discord чат

Курсы javascript