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

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