У меня есть следующий код
скрипка: http://jsfiddle.net/meH2v/3/
Я хочу добавить ссылку для ответа, например
Set 1
Question 1?
Question 2?
Question 3?
Question 4?.
Question 5?.
предположим, что если пользователь нажмет на вопрос, он должен перейти к соответствующему ответу
вы можете попробовать этот код вместо этого
<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>⇑</span>
<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>⇑</span>
<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>⇑</span>
<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>⇑</span>
<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>⇑</span>
<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>⇑</span>
<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>⇑</span>
<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>⇑</span>
<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>⇑</span>
<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>⇑</span>
<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.
проверить эту скрипку