交換jquerymobile的樣式表，帶鏈接

我在URL中有一個名爲$cat（代表'category'）的變量。交換jquerymobile的樣式表，帶鏈接

取決於它是否是「A」或「B」我使用一個鏈接交換樣式表：

<?php 
if($cat == "a") { ?> 
    <link rel="stylesheet" href="/css/styleA.css"> 
<?php } 
elseif($cat == "b") { ?> 
    <link rel="stylesheet" href="/css/styleB.css"> 
<?php } ?>

styleA.css使頭藍色的background-color，並styleB.css使得紅

<div id="header" data-role="header" data-position='fixed'>...</div>

如果我點擊一個鏈接，看起來像這樣的：

<a href="index.php?cat=a">Click for red</a> 
<a href="index.php?cat=b">Click for blue</a>

該URL實際上起作用（內容被包含取決於$ cat），並且我得到$ cat的值，但樣式表似乎沒有交換，因爲顏色沒有改變。但是，如果我重新加載頁面（使用前面鏈接給出的URL）樣式表交換和一切正常工作。

我對我正在使用的網站的桌面版本使用了相同的方法，並且一切正常。這個問題似乎只會出現，如果我使用jQuery的手機。

有沒有人看到爲什麼這不工作，因爲它應該？

編輯（添加HTML）：這是相當多了，但這裏是它的其餘部分：

headpart：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<title></title> 
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> 
<!-- Extra Codiqa features --> 
<link rel="stylesheet" href="/css/codiqa.ext.css"> 
<link rel="stylesheet" href="/css/style.css"> 
<?php if($cat == "a") { ?> <link rel="stylesheet" href="/css/styleASS.css"> <?php } 
     if($cat == "b") { ?> <link rel="stylesheet" href="/css/styleBB.css"> <?php } 
?> 
<!-- jQuery and jQuery Mobile --> 
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script> 
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<!-- Extra Codiqa features --> 
<script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script> 
</head> 


<div data-role="page" id="page"> 
    <div id="panel_menu" data-role="panel" data-display="overlay"> 
     <ul data-role="listview"> 
      <li role="heading">Navigation</li> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Products</a></li> 
      <li><a href="#">Service</a></li> 
      <li><a href="#">Contact</a></li> 
      <li><a href="#">Login</a></li> 
     </ul> 
    </div> 
    <div id="header" data-role="header" data-position='fixed'> 
     <h1>Header</h1> 
     <a href="#panel_menu">Menu</a> 
    </div> 
    <div data-role="content"> 

    <?php include "$menu_page_content";?> 

    <a href="?cat=a&lang=en&menu=home">a</a> 
     <a href="?cat=b&lang=en&menu=home">b</a> 

    </div> 
    <div data-role="footer" data-position="fixed" data-theme="d"> 
     <div data-role="navbar" class="ui-icon-nodisc"> 
      <ul> 
      <li><a href="#" id='language' data-icon='custom'>Change Language</a></li> 
      <li><a href="#" id='category' data-icon="custom" >Change Category</a></li> 
      <li><a href="#" id='contact' data-icon="custom" >Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div><!-- page -->

EDITIT：其上傳到一個免費的主機託管服務提供商：here 你可以點擊內容區域中的某個鏈接，也可以點擊頁腳區域中的「類別」。點擊&重新加載頁面。

來源

2013-08-27 dabe

如果任何SO鏈接你的大部分風格都與顏色的例外相同，我建議將它們放在單一樣式表中，並在課程中寫入身體。

對於實例

.header { 
     /* general header styles margins paddings and whatnot */ 
} 

.cat-a .header { 
     background-color: red; 
} 
.cat-b .header { 
     background-color: blue; 
}

然後可變寫類在身體

<body class='cat-<?php echo $cat; ?>'>

來源

2013-08-27 14:07:32 Orangepill

它必須取決於數據在您使用的瀏覽器上的緩存方式。

幾種解決方案是可能的。

您不能交換CSS樣式表，但使用PhP或Javascript添加樣式屬性。這樣你會100％確定它會改變。（只要用戶使用JavaScript，PhP會使它真的100％確定）

或者強制瀏覽器每次都重新加載CSS表單，但它不是一個帶寬友好的解決方案，我不會推薦這樣做。

如果你想用它來保存用戶的選擇和重新加載正確的背景每次，給看看這個： http://www.dynamicdrive.com/forums/archive/index.php/t-44389.html

沒有找到雖然

來源

2013-08-27 13:28:06 Sugar

我不認爲這取決於我使用的設備上，因爲我在這個問題上我使用的所有設備（IE，FF，GC，iPhone/Pod/Pad，HTC One，...）。當然你是對的，我可能只是使用JS，但我想了解爲什麼這不與PHP工作 – dabe

設備並不真正意味着對不起。它更多的是關於瀏覽器。而且大多數瀏覽器在不重新加載樣式表的情況下都具有相同的行爲。我認爲移動瀏覽器試圖下載它的次數更少，因爲可用帶寬並不相同。 – Sugar

這個問題出現在我能夠測試的每個瀏覽器中的每個設備上，另外我在這個網站的桌面版本上使用完全相同的方法，並且它似乎在那裏完美地工作。編輯：桌面版本也適用於每個移動設備（到目前爲止） – dabe

交換jquerymobile的樣式表，帶鏈接

回答

相關問題