[Yaf]

Всем привет! Помогите, пожалуйста, реализовать задуманное.



Слева — область с контентом.

Справа — меню ссылками.

При нажатии на ссылку — изменяется контент в соответствующей области. Все div с контентом для каждого пункта меню сразу доступны на странице, однако скрываются посредством display:none.

В JQuery не разбираюсь совсем, подключить-то легко, но как сделать такой функционал?

PHP код:

<div style="width:400px; float:left">
Контент
<div class="content-1">Контент, который появляется при нажатии на Пункт 1</div>
<div class="content-2">Контент, который появляется при нажатии на Пункт 2</div>
<div class="content-3">Контент, который появляется при нажатии на Пункт 3</div>
<div class="content-4">Контент, который появляется при нажатии на Пункт 4</div>

</div>

<div style="width:200px;">
Меню <br />
<a href="#p1" class="p1">Пункт 1</a><br />
<a href="#p2" class="p2">Пункт 2</a><br />
<a href="#p3" class="p3">Пункт 3</a><br />
<a href="#p4" class="p4">Пункт 4</a>
</div> 


[Vlad03]

как-то так

Код:

$('.p2').click(function(){
    $('.content-1').css('display', 'none');
    $('.content-2').css('display', 'block');
})

дальше по анологии

[Yaf]

Vlad03, что-то не так: runboyrun.ru/test/

[Vlad03]

Yaf, в скрипте должно быть так

Код:

$(document).ready(function(){
  $('.p2').click(function(){
      $('.content-1').css('display', 'none');
      $('.content-2').css('display', 'block');
  })
});

[Ispanec]

Yaf,
html:

Код:

 <div style="width:400px; float:left">
        Контент
        <div class="content active">Контент, который появляется при нажатии на Пункт 1</div>
        <div class="content">Контент, который появляется при нажатии на Пункт 2</div>
        <div class="content">Контент, который появляется при нажатии на Пункт 3</div>
        <div class="content">Контент, который появляется при нажатии на Пункт 4</div>

    </div>

    <div style="width:200px;">
        Меню <br />
        <a href="#" class="p">Пункт 1</a><br />
        <a href="#" class="p">Пункт 2</a><br />
        <a href="#" class="p">Пункт 3</a><br />
        <a href="#" class="p">Пункт 4</a>



    </div>

css:

Код:

.content {display: none; }
.content.active {display: block;}

jq:

Код:

<script>
        $(document).ready(function(){
                    $(".p").click(function(){
                        $(".content").eq($(".p").index(this)).addClass("active").siblings().removeClass("active");
                    });
                }

        );
    </script>

[Yaf]

Спасибо, все работает отлично!

Вы могли бы подсказать, с чего начать ознакомление с jq? Статьи, книги, сайты. Можно учить jq или сперва надо js проштудировать как таковой?

[Vlad03]

т.к. jq фрэймворк js то лучше с начала учить js.
Есть книга Дэвид Флэнаган - Javascript. Подробное руководство.
И видео уроки от "Специалист".

[Ispanec]

Вы могли бы подсказать, с чего начать ознакомление с jq? Статьи, книги, сайты. Можно учить jq или сперва надо js проштудировать как таковой?

Основы js знать необходимо.
Сам почитываю книгу "Дэвид Флэнаган - JavaScript. Подробное руководство (6-е издание)".
Так же читал http://learn.javascript.ru/ Тут сразу чтение и следом задание на закрепление материала.
По jq читать документацию и смотреть примеры в ней.

Читая все это, не забываем про практику. Увидели что-то на чужом сайте, пытаетесь сделать свой "велосипед". Чем больше сделаете своими руками, тем больше будете понимать как это все работает и как применять в различных ситуациях.

PS Это мои советы и мое мнение, которые могут вам не понадобиться и Вы найдете свой метод изучения.