jquery - 在 jQuery Mobile 中导航时，来自先前文件的样式会干扰当前页面样式

Question

我正在使用 jQuery Mobile 构建应用程序。我在使用 href 链接进行导航时遇到了问题。

假设我有一堆页面中 div 的样式，然后我使用 href 链接导航到另一个页面。如果第二页也有类似的结构，则前一页的样式将应用于第二页。这是一个例子:

这是我在第一页中定义的样式之一:

ul.rig li h3 
{
color: orange;
font-family: tahoma;
font-size: 1.2em;
font-weight: bold;
height: 20%;
left: 10%;
margin: 0;
position: absolute;
text-align: center;
text-shadow: 0.03em 0.03em 0.03em #000;
top: 40%;
width: 80%;
}

在我的第二页中，我有一个名称相同但属性不同的样式:

ul.rig li h3 
{
font-size: 0.9em;
margin: 0 0 5px;
}

现在，如果我从第一页导航到第二页并检查样式:

ul.rig li h3 
{
color: orange;
font-family: tahoma;
font-size: 1.2em;
font-weight: bold;
height: 20%;
left: 10%;
margin: 0;
position: absolute;
text-align: center;
text-shadow: 0.03em 0.03em 0.03em #000;
top: 40%;
width: 80%;
}
ul.rig li h3 
{
font-size: 0.9em; //this is striked out
margin: 0 0 5px;  //this is striked out
}

如您所见，同名样式已替换第二页中的样式。我确保样式是在 body->page 中定义的，而不是在 head 中。我做错了什么？？

Answer 1

当您导航到另一个页面时，第 1 页上的样式不会消失，并且由于列表的类名与第 1 页上的样式相同

font-size: 1.2em;
margin: 0;

优先于第 2 页的样式，因此您会看到删除线

font-size: 0.9em; 
margin: 0 0 5px;

你可以做的是将 !important 添加到第 2 页的 CSS 中

font-size: 0.9em !important; 
margin: 0 0 5px !important;

但是因为 !important 意味着(我想要这种样式胜过其他任何样式)当您导航回第 1 页时

font-size: 1.2em;
margin: 0;

由于样式中的 !important 而无法正常工作，因此您现在会在第 1 页上的样式中看到一个删除线(在此注释上不是 100% 确定，因为我从未使用过外部页面在 JQM 上，所以我不能确定当导航回到第 1 页时第 2 页上的 CSS 会保留还是消失，所以试试看。如果您在第 2 页之后看到第 1 页样式的删除线，那么这个 [ !important] 是原因)

因此，解决此问题的最简单方法是为第 2 页上的列表使用不同的类名并具有不同的样式

您可以将 style="font-size: 0.9em !important;margin: 0 0 5px !important;" 直接添加到第 2 页上的每个 li 元素

然而，还有一种 Jquery 方法可以在不创建另一个类的情况下维护不同页面上的样式(保留第 1 页上的 css 样式。在第 2 页上，您不需要使用此方法)

$( document ).on( "pagebeforeshow", "#page1", function(event) {
$(".rig li h3").css('cssText', 'font-size: 1.2em !important; margin: 0 !important;');
});

$( document ).on( "pagebeforeshow", "#page2", function(event) {
$(".rig li h3").css('cssText', 'font-size:  0.9em !important; margin: 0 0 5px !important');
});

Demo(此方法应该也适用于外部页面)

http://jsfiddle.net/oxpc6xwx/