html - 为什么这个 JQuery 不转换?

标签 html css jquery-ui jquery

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

最佳答案

对于初学者,您缺少第一个页脚(或页面)的结束标记:

   <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

此外,您应该考虑发布格式更合理的代码。适当的缩进会使丢失的标签更容易被发现,并且当代码按照您的格式进行格式化时,您会使那些试图阅读您的代码的人变得更加困难。

关于html - 为什么这个 JQuery 不转换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11751424/

相关文章:

javascript - jQuery fadeOut 不会在 Tumblr 上淡出——它只是消失了

html - 在 Foundation 6 XY 网格中决定何时需要新的 grid-x "row"

html - 将 CSS 内边距设置为负数

jquery - 将按钮添加到 jquery ui 对话框

javascript - Jquery 数据表。可见列的行数组

javascript - 自动滚动到每个 div 暂停,然后继续前进

javascript - 如何替换 div id 中的类名?

jquery - 扩展高度时div溢出并覆盖下一个div

html - 边框半径在 Chrome 和 Safari 浏览器中不起作用

javascript - 如何在php中一张一张处理多张图片上传