Помогите добавить 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/ |
Цитата:
<!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> |
Спасибо, круто) Но мне нужно с ипользованием jquery
Так как с ангуляром вообще не дружу.. а подключать два скрипта для реализации одного ефекта не очень хочется, но спасибо) |
Цитата:
Цитата:
|
Спасибо работает)
Про ангуляр я увидело вот эти срипты и подумал что это на нем.. <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> |
Цитата:
|
Вот ещё вариант...
<!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> |
Цитата:
Дай бог тебе здоровья и успехов) Спасибо! |
Часовой пояс GMT +3, время: 03:54. |