JQuery Mobile 导航栏背景颜色

Question

大家好，我目前正在使用 JQuery Mobile 创建一个网络应用程序。目前，我的页面顶部有一个导航栏，导航栏上的每个按钮内有一系列图像。我已经设置了“data-theme=b”，但这并没有给我我想要的颜色。我尝试过删除它并使用 css 设置背景颜色，但我没有太多运气。

我只是想知道是否可以仅使用 css 或某些 jquery 来更改导航栏颜色。

我的导航栏代码是:

<div data-role="navbar"><!-- navbar -->
  <ul>
    <li><a href="index.html" data-ajax="false" data-transition="flip" ><img src="../../images/icons/SearchLarge.png" height="30px;" width="30px;"></a></li>
    <li><a href="../../index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;"></a></li>
    <li><a href="../app/index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/App3.png" height="30px;" width="30px;"></a></li>
    <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/View.png" height="30px;" width="10px;"></a></li>
    <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/Last2.png" height="30px;" width="30px;"></a></li>
   </ul>
 </div><!-- /navbar -->

Answer 1

您的代码没有任何问题。

Navbar 颜色主题默认为蓝色，data-theme="b" 就是蓝色。将其更改为 a 以查看差异。

工作jsFiddle示例:http://jsfiddle.net/Gajotres/vTBGa/

<div data-role="navbar"><!-- navbar -->
    <ul>
        <li><a href="index.html" data-ajax="false" data-transition="flip" ><img src="../../images/icons/SearchLarge.png" height="30px;" width="30px;"/></a></li>
        <li><a href="../../index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;"/></a></li>
        <li><a href="../app/index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/App3.png" height="30px;" width="30px;"/></a></li>
        <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/View.png" height="30px;" width="10px;"/></a></li>
        <li><a href="#" data-ajax="false" data-theme="a"><img src="../../images/icons/Last2.png" height="30px;" width="30px;"/></a></li>
    </ul>
</div><!-- /navbar -->

如果您要手动更改背景颜色，则必须使用 !important 覆盖来完成，因为在任何其他情况下，您的自定义 CSS将被丢弃。

#other-color {
    background: red !important;
}

如果您想了解有关 jQuery Mobile 如何处理标记增强的更多信息，请查看此 ARTICLE ，这是我的个人博客。还可以有更多的内容，本章也讨论了这个主题: