使用Ajax FAQ装载jQuery的?Ajax、FAQ、jQuery

2023-09-10 21:34:31 作者:稳妥一个萌妹

我有一个左侧导航页面有几个主题列表,一旦你点击链接,我会想加载相关的这些主题右侧的问题。在页面加载,我打开了前10名的问题在正确的区域,但一旦用户点击左侧的话题之一,我想排名前10位的问题消失,并加载使用Ajax的新的问题。所有这些问题都有自己的网页,我只需要找到一个好的Ajax解决方案加载它们。请建议去了解这是一个最好的方法。我想达致这usign的jQuery

I have a page with left nav with several topics in a list and once you click on the links, I would want to load the questions related to those topics on the right side. On page load, I load the top 10 question in the right area but once user click on one of the topic on left, I want top 10 questions disappear and load the new questions with ajax. All those questions have their own pages and I just need to find a good ajax solution to load them. Please suggest a best way to go about this. I would like to acheive this usign jquery

下面是我的code粗加工例如

Here is rough example of my code

主题1 主题2 主题3 ​​ 主题4

推荐答案

重复你的HTML,并添加一个着陆点为负载功能:

repeating your html, and adding a landing spot for the load function:

    <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>