Question

http://jsfiddle.net/kCMvt/

嘿大家好我为手机制作了这个jQuery页面，但转换工作不正常，我认为我已经做好了一切。我几乎看了另一个例子中的代码并使用了相同的代码，但不确定它为什么不转换。有很多CSS因为我从jQuery主题滚轮得到这个，所以这就是为什么它有点过分。我不是太多的jQuery专家（还）做我自己的东西，但我没有想象它实际上是复杂的想到它。

此HTML不会转换：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>jQuery Mobile: Theme Download</title>

        <link rel="stylesheet" href="themes/test1.min.css" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />

        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

    </head>

    <body>

        <div data-role="page" data-theme="a">

            <div data-role="header" data-position="inline">

            <div>

                <h1 style="font-size:16px;text-align:center;">Random Question</h1>

                </div>

            </div>

            <fieldset data-role="controlgroup">



                <input type="radio" name="radiochoice" id="radio-choice-1" value="choice-1" checked="checked" />

                <a href="#page2"><label for="radio-choice-1">Yes</label></a>



                <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />

                <a href="#page2"><label for="radio-choice-2">No</label></a>

            </fieldset>

            <div data-role="content" data-theme="a">

                <p style="text-align:center;font-weight:bold;color:#003366;">blablablab bla</p>

            </div><!-- end content -->







          <div data-role="footer">

          <h4>cool footer</h4> 



        </div><!-- end page -->



 <!-- start of 2nd page -->

 <div data-role="page" id="page2">



 <div data-role="header">

     <h1>Thanks For Your Opinion!</h1>

 </div><!-- end header -->



 <div data-role="content">

     <p>Page Content</p>

 </div>



 <div data-role="footer">

     <h4>Copyright</h4>

    </div><!-- end footer -->

 </div><!-- end page -->   



    </body>

</html>

Answer 1

对于初学者，您缺少第一个页脚（或页面）的结束标记：

   <div data-role="footer">
      <h4>cool footer</h4>
    </div>
  </div><!-- end page -->

然后，您可以将整个输入而不仅仅是标签包装在链接中：

    <a href="#page2">
        <input type="radio" name="radiochoice" id="radio-choice-1" value="choice-1" checked="checked" /> 
        <label for="radio-choice-1">Yes</label>
    </a>
    <a href="#page2">
        <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
        <label for="radio-choice-2">No</label>
    </a>

Here is a working jsFiddle

此外，您应该考虑发布格式更好的代码。正确的缩进会使丢失的标签更容易被发现，并且当你的代码被格式化时，你会使那些尝试读取代码的人变得更加困难。

为什么这个JQuery没有过渡？

1 个答案: