Замена div по щелчку
Всем добрый вечер! Мне надо чтобы при нажатии на ссылки - Главная, О проекте, Как участвовать сменялись блоки 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>
|
Rustam123,
строка 5 выдаст всегда ноль, строка 6 непонятно что ищет, но только не блоки A,B,C |
Открывашка 247
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>
|
| Часовой пояс GMT +3, время: 00:51. |