0

这是一个示例页面A跳转页面B，页面B有自己的css引用，当页面A到B时，

css 不生效，例如：

/* page A start */

<head>
    <link rel="stylesheet" href="jquery.mobile.css" />
    <script src="jquery.mobile.js"></script>
</head>
<body>
    <div data-role="page">
       <a  href="B.html" data-role="button" data-theme="a">this is A</a>
    </div>
</body>

/* page A end */

/* page B start */

<head>
    <link rel="stylesheet" href="jquery.mobile.css" />
    <script src="jquery.mobile.js"></script>
    <style>
        a{
            color : red !important;
         }
        #a{
           height : 100px;
           width : 100px;
            color : red;
         }
    </style>
</head>
<body>
    <div data-role="page" >
      <a  href="A.html" data-role="button" data-theme="a">this is B</a>
      <div id="a">bbb</div>
    </div>
</body>

/* page B end */

当 A 用 ajax 跳转到 B 时，颜色不会改变 'div' 没有设置高度和宽度，所以我

find 把''标签放在'div' data-role="page" 里面有效果，但是还有其他的吗

解决办法解决吗？也使用 ajax 和样式放在 B 页面中

4

2 回答 2

0

将样式标签放在正文部分。

<body>
<style>
    a{
        color : red !important;
     }
    #a{
       height : 100px;
       width : 100px;
        color : red;
     }
</style>
</body>
于 2012-05-28T09:35:42.360 回答
0

当 JQM 通过 ajax 加载第二个页面时，它会忽略该<head>部分中的所有内容。这包括脚本和 css。最好的解决方案是创建您自己的外部 css 文件，该文件包含在每个页面中。您可能在想，如果它忽略了里面的所有内容，我为什么要这样做<head>。好吧，这是为了以防有人重新加载页面或通过链接（电子邮件或社交网站）进入该页面。当你这样做时，你需要更具体地使用你的 CSS。IE

#page2 a{
    color : red !important;
}
#page2 #a{
   height : 100px;
   width : 100px;
   color : red;
}
于 2012-05-28T20:22:08.453 回答