Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.05.2019, 13:15
Аспирант
Отправить личное сообщение для nikoshot Посмотреть профиль Найти все сообщения от nikoshot
 
Регистрация: 16.10.2016
Сообщений: 35

Помогите добавить class
Работает так что при наведении на блок .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/
Ответить с цитированием
  #2 (permalink)  
Старый 15.05.2019, 13:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 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>

Последний раз редактировалось ksa, 15.05.2019 в 13:40.
Ответить с цитированием
  #3 (permalink)  
Старый 15.05.2019, 13:45
Аспирант
Отправить личное сообщение для nikoshot Посмотреть профиль Найти все сообщения от nikoshot
 
Регистрация: 16.10.2016
Сообщений: 35

Спасибо, круто) Но мне нужно с ипользованием jquery
Так как с ангуляром вообще не дружу.. а подключать два скрипта для реализации одного ефекта не очень хочется, но спасибо)
Ответить с цитированием
  #4 (permalink)  
Старый 15.05.2019, 14:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от nikoshot
Но мне нужно с ипользованием jquery
Так я так и сделал...
Сообщение от nikoshot
Так как с ангуляром вообще не дружу.. а подключать два скрипта для реализации одного ефекта не очень хочется
Ангуляра нет в примере.
Ответить с цитированием
  #5 (permalink)  
Старый 15.05.2019, 15:17
Аспирант
Отправить личное сообщение для nikoshot Посмотреть профиль Найти все сообщения от nikoshot
 
Регистрация: 16.10.2016
Сообщений: 35

Спасибо работает)
Про ангуляр я увидело вот эти срипты и подумал что это на нем..
<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>
Ответить с цитированием
  #6 (permalink)  
Старый 15.05.2019, 15:51
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от nikoshot
я увидело вот эти срипты
Они закоментированны, отключены и не работают в этом примере.
Ответить с цитированием
  #7 (permalink)  
Старый 15.05.2019, 20:05
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Вот ещё вариант...
<!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>
Ответить с цитированием
  #8 (permalink)  
Старый 23.05.2019, 11:26
Аспирант
Отправить личное сообщение для nikoshot Посмотреть профиль Найти все сообщения от nikoshot
 
Регистрация: 16.10.2016
Сообщений: 35

Сообщение от Malleys Посмотреть сообщение
Вот ещё вариант...
<!doctype html>
    <style>
      .tabs {
        border: 1px solid;
      }

      .tabs:not(:hover) .tab_item.active, .tab_item:hover {
        color: red;
      }
    </style>
Снова понадобилось это решение.. смотрю твой способ вообще на ура)

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как присвоить class определенному элементу списка? oleglantukh Общие вопросы Javascript 6 12.01.2019 18:35
Как к window.location.href добавить class? Shahmatist Элементы интерфейса 5 13.10.2013 13:47
Использование классов в JavaScript devote Ваши сайты и скрипты 70 01.02.2013 17:17
помогите добавить class/id элементу magnateg Events/DOM/Window 39 19.11.2011 23:41
помогите добавить в скрипт закрытие и где вставить отправит Александр х@к Элементы интерфейса 5 25.08.2011 21:27