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;
}

现在如果我从第1页导航到第2页并检查样式：

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-＆gt;页面内定义而不是在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上所以我无法确定第2页上的CSS是否会在导航回到第1页时保留或消失，所以试试并看看。如果你看到第2页后第1页上的样式的删除，那么这[ ！important]是原因）

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

您可以直接在第2页的每个style="font-size: 0.9em !important;margin: 0 0 5px !important;"元素中添加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');
});

演示（此方法也适用于外部网页）

http://jsfiddle.net/oxpc6xwx/

在jQuery mobile中导航时，以前文件中的样式会干扰当前页面样式

1 个答案: