Question

我在网址中有一个名为$cat的变量（代表'category'）。

根据是“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 mobile时才会出现。

有谁知道为什么这不起作用？

编辑（添加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 您可以单击内容区域中的某个链接，也可以单击页脚区域中的“类别”。点击＆amp;重新加载页面。

Answer 1

这必须取决于您正在使用的浏览器上缓存数据的方式。

可能有几种解决方案。

您无法交换CSS样式表，但使用PhP或Javascript添加样式属性。那样你就100％肯定它会改变。（只要用户有javascript顺便说一句，PhP会让它真正100％肯定）

或强制浏览器每次都重新加载CSS表格，但这不是带宽友好的解决方案，我不建议这样做。

如果您想使用它来保存用户的选择并每次重新加载正确的背景，请看一下： http://www.dynamicdrive.com/forums/archive/index.php/t-44389.html

没有找到任何SO链接

Answer 2

如果你的大多数风格都是相同的，除了颜色我建议把它们放在一个样式表中，然后在课堂上写一些。

例如

 .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; ?>'>

使用链接交换jquerymobile的样式表

2 个答案: