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

Question

我有以下代码

小提琴：http://jsfiddle.net/meH2v/3/

我想添加导航链接来回答如

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：

的问题是，$（ “隐藏 ”）DIV内容应对到$（“ 可见”）DIV，复制元件..并且因此书签导航到与请求的id匹配的第一个元素，因此它导航到$（“。hidden”）div中的元素（不是可见的元素），该行对用户不可见，如下所示：

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

所以一个可能的解决方案，如果你不承诺给定的html结构是将“.visible”div放在“.hidden”div之前。

检查此琴

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