Question

有人可以试着回答这个问题吗，我已经在很多地方问了这个问题，但我无法得到答案。

想一想：您是否注意到在您的Facebook个人资料中，当您在主页中向下滚动时，新闻Feed会在您滚动时继续加载，但顶部栏包含通知图标消息图标和主页图标是静态的。只有您的朋友新闻Feed才会显示，而不会刷新任何其他页面内容。

这是Ajax过渡，对吧？

我提到上面的例子只是为了让你知道我在页面中想要什么。

我正在使用jquery mobile开发一个问答游戏。有2个团队，每个团队都有一个X和O标记。

单选按钮：TEAM -X和TEAM -Y位于页面顶部，单选按钮代码为：

<div style="margin-left:510px;">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
            <input type="radio" name="players" id="playerx"/>
             <label for="playerx"><b>TEAM - X</b></label>
             <input type="radio" name="players" id="playery"/>
              <label for="playery"><b>TEAM - O</b></label>                                      
        </fieldset>
     </div>            
</div>

接下来是一系列9个方格，其代码为：

    <div id = "box">
      <li><br/>
        <div style = "margin-left: 550px;">
<canvas id = "canvas1"  width="50" height="50"      style="border:3px solid #3B6EA1"  onclick="canvasClicked(1)"></canvas>

    <canvas id = "canvas2"  width="50" height="50" style="border:3px solid #3B6EA1" onclick="canvasClicked(2)"></canvas>

    <!-- Similarly for rest of the 7 boxes -->
        </div>
       </li>
    </div>

下面是问题，代码是这样的。这个问题比上边距低约500像素。 QUESTION CODE:

<div class = "questionHolder">
            <div class = "questionBorder">
                <h4 style = "color: #58CE2D; font-size: 21px;">Who tirelessly hacked in a garage, to give the world PHP?</h4>
                <div class = "ui-grid-b">
                    <div class = "ui-block-a"><a href = "#anagram1" data-rel = "dialog" style = "text-decoration:none;" ><button data-theme = "b" data-icon = "star">ANAGRAM</button></a></div>
                    <div class = "ui-block-b"><a href = "#answer1" data-rel = "dialog" style = "text-decoration: none;"><button data-theme = "b" data-icon = "check">ANSWER</button></a></div>
                    <div class = "ui-block-c"><a href = "#question2" style = "text-decoration: none;"><button data-theme = "b" data-icon = "forward">NEXT</button></a></div>
                </div>
            </div>

现在考虑我有很多这样的问题（html页面）。说问ques1.html，quest2.html ques3.html等。

这些ques1.html，ques2.html等仅由QUESTION CODE:而非其他内容组成。

当用户在特定问题中按下NEXT按钮时，我只想加载quest2.html或question3.html而不刷新单选按钮代码或TIC-TAC_TOE框代码。请指导我。我实际上在实现$ get（）方法时遇到了麻烦。我
页面的ajax-transition设置为true。

Answer 1

要将HTML代码加载到页面中，请使用.load('file.html')。

$('.target').load('page.html');

.target可以是#id或.class或任何jQuery选择器。

jquery mobile中的Ajax转换

1 个答案: