1

大家好，我目前正在使用 JQuery Mobile 创建 Web 应用程序。我目前在页面顶部有一个导航栏，在导航栏上的每个按钮内都有一系列图像。我已经设置了“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 -->
4

3 回答 3

3

您需要使用带有类的 divui-body和ui-body-b.

演示

<div class="ui-body-b ui-body">
  <div data-role="navbar">
    <ul>
        <li><a href="#" data-icon="grid">A</a></li>
        <li><a href="#" data-icon="star">B</a></li>
        <li><a href="#" data-icon="gear">C</a></li>
        <li><a href="#" data-icon="arrow-l">D</a></li>
        <li><a href="#" data-icon="arrow-r">E</a></li>
    </ul>
  </div><!-- /navbar -->
</div><!-- /container -->
于 2013-06-20T09:56:12.133 回答
3

你的代码没有问题。

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 如何处理标记增强的信息，请查看这篇文章，这是我的个人博客。除了这个之外，还有更多的约束，本章也讨论了这个主题：

于 2013-06-20T09:56:57.217 回答
0 
data-role="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 style="background=#000;"><a href="../../index.html" data-ajax="false"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;"></a></li>

                <li syle="background=#000;"><a href="../app/index.html" data-ajax="false"><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>
于 2013-06-20T09:51:24.813 回答