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

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>
Ответить с цитированием