Ajax FAQ загрузка с использованием jquery?

Question

У меня есть страница с левой навигационной панелью с несколькими темами в списке, и как только вы нажмете на ссылки, я бы хотел загрузить вопросы, относящиеся к этим темам, справа. При загрузке страницы я загружаю топ-10 вопросов в правой области, но как только пользователь нажимает на одну из тем слева, я хочу, чтобы топ-10 вопросов исчезли и загрузили новые вопросы с помощью ajax. У всех этих вопросов есть свои страницы, и мне просто нужно найти хорошее решение Ajax для их загрузки. Пожалуйста, предложите лучший способ сделать это. Я хотел бы получить этот usign jquery

Вот примерный пример моего кода

• Тема 1
• Тема 2
• Тема 3
• Тема 4

Это вопрос 1 Это ответ 1 1

Answer 1

Вы можете загрузить весь контент за один раз в соответствующий

<div id="ans1"></div>
<div id="ans2"></div>
<div id="ans3"></div>

, но при первоначальной загрузке только ans1 div и скрыть оставшиеся.

когда вы нажимаете гиперссылку question2, скрывайте div ans1 и показывайте div ans2.

Answer 2

повторение вашего HTML и добавление места посадки для функции загрузки:

    <ul>
        <li>Topic 1
             <div class="Top10Questions"></div>
        </li>
        <li>Topic 2 <div class="Top10Questions"></div></li>
        <li>Topic 3 <div class="Top10Questions"></div></li>
        <li>Topic 4 <div class="Top10Questions"></div></li>
        </ul>
    <script>
    $(document).ready(
     function(event){
        $("li").click(function(event){
//hide all the questions, you only want to see the topic they clicked on
           $(".Top10Questions").hide();
           $(this).find(".Top10Questions").load("urlToGetAnswer", {json:"of",url:"param",key:"value pairs"}, function(data, text, xhr){
      $(this).show();
    });
        });
    });
    </script>

Answer 3

Вы можете использовать jQuery.load() для загрузки страниц.

$('#topic').load('topics/topic1.html');

, где #topic - это id контейнера, в который вы хотите загрузить ответ.