Как связать с 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> 

Update 2:

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

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

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

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

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