как сделать ссылку на div, который был скопирован в новый div?

0

У меня есть следующий код

скрипка: http://jsfiddle.net/meH2v/3/

Я хочу добавить ссылку для ответа, например

Set 1

Question 1?
Question 2?
Question 3?
Question 4?.
Question 5?.

предположим, что если пользователь нажмет на вопрос, он должен перейти к соответствующему ответу

Теги:

1 ответ

3
Лучший ответ

вы можете попробовать этот код вместо этого

http://jsfiddle.net/x9Mrr/2/

<div>

<div id="wrapper">
    <aside id="sidebar">
        <h2>Questions</h2>
        <ul id="subnavigation">
            <li tab="set-1" class="active"><a href="#">Set 1</a></li>
            <li tab="set-2"><a href="#">Set 2</a></li>
        </ul>
    </aside>


    <div id="set-1" style="display: block" class="active-ques-set">
        <h3 class="ques-header">Set 1</h3>

        <ol class="true-ol" style="display: block">
            <li><a href="#faq1">Question 1?</a></li>
            <li><a href="#faq2">Question 2?</a></li>
            <li><a href="#faq3">Question 3?</a></li>
            <li><a href="#faq4">Question 4?.</a></li>
            <li><a href="#faq5">Question 5?.</a></li>
        </ol>

        <ol class="fake-ol"></ol>

        <div class="hidden">
            <div class="single-faq" id="faq1">
                <hr>
                <h3>1. Question 1?</h3>
                <p>Answer 1.</p>
                <p class="up">
                    <span>&uArr;</span>&nbsp;
                                            <a href="#wrapper">Back to Top</a>
                </p>
            </div>

            <div class="single-faq" id="faq2">
                <hr>
                <h3>2.Question 2?</h3>
                <p>Answer 2</p>
                <p class="up">
                    <span>&uArr;</span>&nbsp;
                                            <a href="#wrapper">Back to Top</a>
                </p>
            </div>

            <div class="single-faq" id="faq3">
                <hr>
                <h3>3. Question 3?</h3>
                <p>Answer 3.</p>
                <p class="up">
                    <span>&uArr;</span>&nbsp;
                                            <a href="#wrapper">Back to Top</a>
                </p>
            </div>

            <div class="single-faq" id="faq4">
                <hr>
                <h3>4. Question 4 ?.</h3>
                <p>Answer 4</p>
                <p class="up">
                    <span>&uArr;</span>&nbsp;
                                            <a href="#wrapper">Back to Top</a>
                </p>
            </div>

            <div class="single-faq" id="faq5">
                <hr>
                <h3>5.Question 5 ?.</h3>
                <p>Answer 5</p>
                <p class="up">
                    <span>&uArr;</span>&nbsp;
                                            <a href="#wrapper">Back to Top</a>
                </p>
            </div>
        </div>

        <div class="visible">
        </div>

    </div>
</div>

<div id="set-2" style="display: none">
    <h3 class="ques-header">Set 2</h3>

    <ol class="true-ol" style="display: none">
        <li><a href="#faq6">Question 6?</a></li>
        <li><a href="#faq7">Question 7?</a></li>
        <li><a href="#faq8">Question 8?</a></li>
        <li><a href="#faq9">Question 9?.</a></li>
        <li><a href="#faq10">Question 10?.</a></li>
    </ol>

    <ol class="fake-ol"></ol>

    <div class="hidden">
        <div class="single-faq" id="faq6">
            <hr>
            <h3>1. Question 6?</h3>
            <p>Answer 6.</p>
            <p class="up">
                <span>&uArr;</span>&nbsp;
                                            <a href="#wrapper">Back to Top</a>
            </p>
        </div>

        <div class="single-faq" id="faq7">
            <hr>
            <h3>2.Question 7?</h3>
            <p>Answer 7</p>
            <p class="up">
                <span>&uArr;</span>&nbsp;
                                            <a href="#wrapper">Back to Top</a>
            </p>
        </div>

        <div class="single-faq" id="faq8">
            <hr>
            <h3>3. Question 8?</h3>
            <p>Answer 8.</p>
            <p class="up">
                <span>&uArr;</span>&nbsp;
                                            <a href="#wrapper">Back to Top</a>
            </p>
        </div>

        <div class="single-faq" id="faq9">
            <hr>
            <h3>4. Question 9 ?.</h3>
            <p>Answer 9</p>
            <p class="up">
                <span>&uArr;</span>&nbsp;
                                            <a href="#wrapper">Back to Top</a>
            </p>
        </div>

        <div class="single-faq" id="faq10">
            <hr>
            <h3>5.Question 10 ?.</h3>
            <p>Answer 10</p>
            <p class="up">
                <span>&uArr;</span>&nbsp;
                                            <a href="#wrapper">Back to Top</a>
            </p>
        </div>
    </div>

    <div class="visible">
    </div>

</div>
</div>


<script>

    $(document).ready(function ()
    {
        $('#subnavigation a').bind('click', function (e)
        {
            e.preventDefault();

            var $li = $(this).closest('li');
            var tab = $li.attr('tab');
            var current = $('.active').attr('tab');

            $('#' + current).fadeOut('fast');
            $('#' + tab).fadeIn("slow");

            //Remove active class from current link
            $('.active').removeClass('active');
            //Remove active class from current tab
            $('.active-ques-set').removeClass("active-ques-set");

            $li.addClass('active');
            $('#' + tab).addClass("active-ques-set");

            var $set = $('#' + tab);
            var $currentset = $set.attr('id');

            $("#" + $currentset).find('.true-ol').show();
        });
    });
</script>

Обновление 2:

Проблема заключается в том, что копирование содержимого $ (". Hidden") div в $ ("visible") div, дублирует элементы.. и, следовательно, закладка переходит к первому элементу, который соответствует запрошенному id, поэтому он переходит к элемент в $ (". hidden") div (не видимый), который не отображается пользователю в соответствии с этой строкой кода:

  $('#'+$currentset+' .hidden').hide();

Поэтому одно возможное решение, если вы не привержены данной структуре html, заключается в том, чтобы поставить ".visible" div перед ".hidden" div.

проверить эту скрипку

http://jsfiddle.net/meH2v/8/

  • 0
    Хорошо, спасибо за ответ, но мои требования - скопировать div с классом «hidden» в div с классом «visible», а затем связать вопросы для ответа .....
  • 0
    это обновление отвечает на ваш вопрос?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню