Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 31.10.2015, 19:57
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

Сори,ошибся.Там не id="tab-in_1, а class="tab-in_1", если про это.
Ответить с цитированием
  #12 (permalink)  
Старый 31.10.2015, 20:06
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,660

ureech, про это class="tab-in_?"
Ответить с цитированием
  #13 (permalink)  
Старый 31.10.2015, 20:30
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

Да, класс у всех этих дивов один, а дивов по одному в каждом табе.
Ответить с цитированием
  #14 (permalink)  
Старый 31.10.2015, 20:36
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,660

ureech, ну так напиши все дивы и js код как пишешь...
Ответить с цитированием
  #15 (permalink)  
Старый 31.10.2015, 20:55
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

<li><a class="tab" href="#tab-mus">Музыка</a></li>
		 <li><a class="tab"  href="#tab-bis">Бизнесс</a></li>
		 <li><a class="tab" href="#tab-pol">Политика</a></li>		 
		 <li><a class="tab" href="#tab-mov">Кино</a></li>

<div id="tab-mus" >
<div class="tab-in_1 animated" ></div>
</div>
<div id="tab-pol" >
<div class="tab-in_1 animated" ></div>
</div>
<div id="tab-mov" >
<div class="tab-in_1 animated" ></div>
</div>
<div id="tab-bis" >
<div class="tab-in_1 animated" ></div>
</div>

$('.tab').on('click', function() {
    $('.tab-in_1').toggleClass('zoomIn');
});

Последний раз редактировалось ureech, 31.10.2015 в 23:02.
Ответить с цитированием
  #16 (permalink)  
Старый 01.11.2015, 11:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Открывашка 231
ureech,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.tab-in_1.zoomIn  {
    height: 100px;
    background: #FFCC00;
    display: block;
  }
  .animated {
      transition: all 1s ease-in-out;
  }
  .tab-in_1  {
    height: 0px;
     overflow: hidden;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
  <script>
   $(function()
     {
       $('.tab').on('click', function(event)
         {
           event.preventDefault();
           var id = this.getAttribute('href')
           $('.tab-in_1').not($('.tab-in_1', id).toggleClass('zoomIn')).removeClass('zoomIn')
         }
       );
     }
   );
  </script>
</head>

<body>
  <ul>
    <li>
      <a class="tab" href="#tab-mus">Музыка</a>
    </li>

    <li>
      <a class="tab" href="#tab-bis">Бизнесс</a>
    </li>

    <li>
      <a class="tab" href="#tab-pol">Политика</a>
    </li>

    <li>
      <a class="tab" href="#tab-mov">Кино</a>
    </li>
  </ul>

  <div id="tab-mus">
    <div class="tab-in_1 animated">
      Музыка
    </div>
  </div>

  <div id="tab-pol">
    <div class="tab-in_1 animated">
      Политика
    </div>
  </div>

  <div id="tab-mov">
    <div class="tab-in_1 animated">
      Кино
    </div>
  </div>

  <div id="tab-bis">
    <div class="tab-in_1 animated">
      Бизнесс
    </div>
  </div>
</body>
</html>
Ответить с цитированием
  #17 (permalink)  
Старый 01.11.2015, 13:49
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

Большое спасибо,рони, работает. Теперь такой вопрос. Если я добавляю в таб, ещё один эллемент с другим класом
<div id="tab-pol">
<img class="tab-img animated" src="" />
    <div class="tab-in_1 animated">
      Политика
    </div>
  </div>


и дописываю в код
$(function()
     {
       $('.tab').on('click', function(event)
         {
           event.preventDefault();
           var id = this.getAttribute('href')
           $('.tab-in_1').not($('.tab-in_1', id).toggleClass('zoomIn')).removeClass('zoomIn');
           $('.tab-img').not($('.tab-img', id).toggleClass('fadeInLeft')).removeClass('fadeInLeft')
         }
       );
     }
   );

то в диве анимация работает как надо, а вот в img срабатывает только по одному разу в каждом табе.Повтор требует перезагрузки страницы.
Пробовал сделать так
<div id="tab-pol">
<img class="tab-anim fadeInLeft" src="" />
    <div class="tab-in_1 tab-anim zoomIn">
      Политика
    </div>
  </div>


$(function()
     {
       $('.tab').on('click', function(event)
         {
           event.preventDefault();
           var id = this.getAttribute('href')
           $('.tab-anim').not($('.tab-anim', id).toggleClass('animated')).removeClass('animated')
         }
       );
     }
   );

Но так в img анимация вообще не работает.
Ответить с цитированием
  #18 (permalink)  
Старый 01.11.2015, 14:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

ureech,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.tab-in_1.zoomIn  {
    height: 100px;
    background: #FFCC00;

  }
  .animated {
      transition: all 1s ease-in-out;
  }
  .tab-in_1  {
    height: 0px;
    overflow: hidden;
  }
 .tab-img {
   margin-left: -400px;
  }
 .tab-img.animated {
      transition: all 1s ease-in-out;
   }

.tab-img.zoomIn  {
     margin-left: 0px;
  }
  body>div{
    position: absolute;
    top:150px;
  }
  body{
    position: relative;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
  <script>
   $(function()
     {
       $('.tab').on('click', function(event)
         {
           event.preventDefault();
           var id = this.getAttribute('href')
           $('.tab-in_1, .tab-img').not($('.tab-in_1, .tab-img', id).toggleClass('zoomIn')).removeClass('zoomIn')
         }
       );
     }
   );
  </script>
</head>

<body>
  <ul>
    <li>
      <a class="tab" href="#tab-mus">Музыка</a>
    </li>

    <li>
      <a class="tab" href="#tab-bis">Бизнесс</a>
    </li>

    <li>
      <a class="tab" href="#tab-pol">Политика</a>
    </li>

    <li>
      <a class="tab" href="#tab-mov">Кино</a>
    </li>
  </ul>

  <div id="tab-mus"><img class="tab-img animated" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
    <div class="tab-in_1 animated">
      Музыка
    </div>
  </div>

  <div id="tab-pol"><img class="tab-img animated" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
    <div class="tab-in_1 animated">
      Политика
    </div>
  </div>

  <div id="tab-mov"><img class="tab-img animated" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
    <div class="tab-in_1 animated">
      Кино
    </div>
  </div>

  <div id="tab-bis"><img class="tab-img animated" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
    <div class="tab-in_1 animated">
      Бизнесс
    </div>
  </div>
</body>
</html>
Ответить с цитированием
  #19 (permalink)  
Старый 01.11.2015, 14:53
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 765

Это всё хорошо конечно, но дело в том, что класс самой анимации разный у дива и img
Ответить с цитированием
  #20 (permalink)  
Старый 01.11.2015, 15:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

ureech,
изучайте css, тут достаточно менять класс только у самого блока tab-mus и т.д. -- вы меняите классы и скрываите ваше css, поэтому далее сами, в скриптах больше ничего не понадобится добавлять, только селекторы уточнить.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение свойства :hover по клику дива BoB jQuery 6 21.10.2012 13:36
Заменить свойство click на hover, как? denjer Events/DOM/Window 1 06.09.2012 13:28
Установка цвета через функцию .css() сбрасывает цвет для :hover xintrea jQuery 4 18.08.2012 15:38
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28
live click выполняется несколько раз hara jQuery 9 09.06.2010 10:58