Question

我有以下代码

我想添加导航链接以回答例如

Set 1

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

假设用户点击问题他应该导航到相应的答案

Answer 1

您可以尝试使用此代码

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（不是可见的）div中的元素，根据这行代码，用户看不到该元素：

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

因此，如果你没有提交给定的html结构，那么一个可能的解决方案是将“.visible”div放在“.hidden”div之前。

检查这个小提琴

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

如何链接到已复制到新div的div？

1 个答案: