Помощь с выводом блоков при клике по ссылкам (JQuery)

(Ответов: 7, Просмотров: 2564)
  1. Студент Аватар для Yaf
    • Регистрация: 05.07.2011
    • Сообщений: 90
    • Репутация: 3
    Всем привет! Помогите, пожалуйста, реализовать задуманное.

    Нажмите на изображение для увеличения.  Название:	kh7sSjY8LCw.jpg  Просмотров:	10  Размер:	26.5 Кб  ID:	17058

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

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

    При нажатии на ссылку — изменяется контент в соответствующей области. Все 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
    • 0
  2. Опытный Аватар для Vlad03
    • Регистрация: 21.05.2014
    • Сообщений: 404
    • Репутация: 33
    • Webmoney BL: ?
    как-то так
    Код:
    $('.p2').click(function(){
        $('.content-1').css('display', 'none');
        $('.content-2').css('display', 'block');
    })
    дальше по анологии
    • 1

    Спасибо сказали:

    Yaf(26.02.2015),
  3. Студент Аватар для Yaf
    • Регистрация: 05.07.2011
    • Сообщений: 90
    • Репутация: 3
    Vlad03, что-то не так: runboyrun.ru/test/
    • 0
  4. Опытный Аватар для Vlad03
    • Регистрация: 21.05.2014
    • Сообщений: 404
    • Репутация: 33
    • Webmoney BL: ?
    Yaf, в скрипте должно быть так
    Код:
    $(document).ready(function(){
      $('.p2').click(function(){
          $('.content-1').css('display', 'none');
          $('.content-2').css('display', 'block');
      })
    });
    • 1

    Спасибо сказали:

    Yaf(26.02.2015),
  5. Дипломник Аватар для Ispanec
    • Регистрация: 27.04.2010
    • Сообщений: 142
    • Репутация: 33
    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>
    «Если кто не хочет трудиться, тот и не ешь!» © Послание апостола Павла к Фессалоникийцам, гл. 3, ст. 10
    • 1

    Спасибо сказали:

    Yaf(26.02.2015),
  6. Студент Аватар для Yaf
    • Регистрация: 05.07.2011
    • Сообщений: 90
    • Репутация: 3
    Спасибо, все работает отлично!

    Вы могли бы подсказать, с чего начать ознакомление с jq? Статьи, книги, сайты. Можно учить jq или сперва надо js проштудировать как таковой?
    • 0
  7. Опытный Аватар для Vlad03
    • Регистрация: 21.05.2014
    • Сообщений: 404
    • Репутация: 33
    • Webmoney BL: ?
    т.к. jq фрэймворк js то лучше с начала учить js.
    Есть книга Дэвид Флэнаган - Javascript. Подробное руководство.
    И видео уроки от "Специалист".
    • 1

    Спасибо сказали:

    Yaf(26.02.2015),
  8. Дипломник Аватар для Ispanec
    • Регистрация: 27.04.2010
    • Сообщений: 142
    • Репутация: 33
    Цитата Сообщение от Yaf Посмотреть сообщение
    Вы могли бы подсказать, с чего начать ознакомление с jq? Статьи, книги, сайты. Можно учить jq или сперва надо js проштудировать как таковой?
    Основы js знать необходимо.
    Сам почитываю книгу "Дэвид Флэнаган - JavaScript. Подробное руководство (6-е издание)".
    Так же читал http://learn.javascript.ru/ Тут сразу чтение и следом задание на закрепление материала.
    По jq читать документацию и смотреть примеры в ней.

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

    PS Это мои советы и мое мнение, которые могут вам не понадобиться и Вы найдете свой метод изучения.
    «Если кто не хочет трудиться, тот и не ешь!» © Послание апостола Павла к Фессалоникийцам, гл. 3, ст. 10
    • 1

    Спасибо сказали:

    Yaf(26.02.2015),

Похожие темы

Темы Раздел Ответов Последний пост
Нужна помощь с JComments и выводом meta описания
Joomla 0 24.02.2014 13:57
MODX Revolution - регистрация, нужна помощь с выводом сообщения об ошибке.
CMS 0 20.05.2013 00:34
JQuery. требуется помощь
Вопросы от новичков 3 09.05.2013 02:39

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры