Форум

Rustam123 · #1 (**permalink**) 20.01.2016, 22:07

Всем добрый вечер! Мне надо чтобы при нажатии на ссылки - Главная, О проекте, Как участвовать сменялись блоки A,B,C но почему то код не работает, в чем проблема не могу понять.

<script>
var links = $('.obrashenie li a');
 
links.click(function(){
    var indx = $(this).index();
    var blocks = $(this).siblings('div');
    blocks.animate({
        opacity: 0
    }).eq(indx).animate({
        opacity: 1
    });
});
    </script>

<div class="col-md-2 pan">
          <nav>
            <div class="">
               <img class="logo" src="img/Logo.png">
            </div>
        <ul id="navigation" class="obrashenie">
          <li><a href="#">ГЛАВНАЯ</a></li>
          <li><a href="#about">О ПРОЕКТЕ</a></li>
          <li><a href="#" class="hovertrigger">КАК УЧАВСТВОВАТЬ</a></li>
        </ul>
          </nav>
      </div>
    <!-- Контейнер в котором отоброжается основная информация -->
    <div class="col-md-10 containersinf">
<div class="par">
    <div class="blockA"></div>
    <div class="blockB"></div>
    <div class="blockC"></div>
</div>
 
 
    </div>

рони · #2 (**permalink**) 20.01.2016, 22:40

Rustam123,
строка 5 выдаст всегда ноль,
строка 6 непонятно что ищет, но только не блоки A,B,C

рони · #3 (**permalink**) 20.01.2016, 22:44

Rustam123,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .par > div:nth-child(n+2)  {
   opacity: 0
  }
  .par > div{
    position: absolute;
  }
  .par {
    position:  relative;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
var links = $('.obrashenie li a'), blocks = $('.par > div');
links.click(function(event){
    event.preventDefault()
    var indx = links.index(this);
    blocks.stop(true,true).not(blocks.eq(indx).animate({opacity: 1})).animate({opacity: 0});

});
});


  </script>
</head>

<body>
<div class="col-md-2 pan">
          <nav>
            <div class="">
               <img class="logo" src="img/Logo.png">
            </div>
        <ul id="navigation" class="obrashenie">
          <li><a href="#">ГЛАВНАЯ</a></li>
          <li><a href="#about">О ПРОЕКТЕ</a></li>
          <li><a href="#" class="hovertrigger">КАК УЧАВСТВОВАТЬ</a></li>
        </ul>
          </nav>
      </div>
    <!-- Контейнер в котором отоброжается основная информация -->
    <div class="col-md-10 containersinf">
<div class="par">
    <div class="blockA">ГЛАВНАЯ</div>
    <div class="blockB">О ПРОЕКТЕ</div>
    <div class="blockC">КАК УЧАВСТВОВАТЬ</div>
</div>
</div>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript