2

我目前已经为我的导航栏设置了数据主题 a，但我希望能够将其设置为不同的颜色。我该怎么做呢？导航栏位于标题内。如何覆盖 jquery mobile 的 css？

 <div data-role="page">
 <div data-role="header" data-id="pagetabs"  data-position="fixed"> <!-- MyActivity Header-->
    <div data-role="navbar" data-iconpos="left">
        <ul>
          <li><a href="fb_feed.html" data-prefetch="true" rel="external" data-icon="fbicon"> Facebook</a></li>
          <li><a href="youtube_feed.html" data-prefetch="true" rel="external" data-icon="yticon">YouTube</a></li>
          <li><a href="my_activity.html" id="my_activitypage" data-prefetch="true" data-icon="maicon" class="ui-btn-active ui-state-persist">My Activity</a></li>
        </ul>
    </div>
  </div> <!-- MyActivity Header End -->
  <div data-role="content">
   </div> <!-- MyActivity Content End -->
   <div data-role="footer" data-theme="a" data-position="fixed"><h5>Social Stream</h5></div> <!-- MyActivity Footer -->
  </div> <!--End of page -->
4

3 回答 3

4

工作示例：http: //jsfiddle.net/Gajotres/PMrDn/39/

HTML：

<div data-role="navbar" data-iconpos="left" class="custom-navbar">
    <ul>
        <li><a href="" data-prefetch="true" rel="external" data-icon="fbicon"> Facebook</a></li>
        <li><a href="" data-prefetch="true" rel="external" data-icon="yticon">YouTube</a></li>
        <li><a href="" id="my_activitypage" data-prefetch="true" data-icon="maicon" class="ui-btn-active ui-state-persist">My Activity</a></li>
    </ul>
</div>

CSS：

.custom-navbar ul li a {
    background: #67497a; /* Old browsers */
    background: linear-gradient( #67497a,#946ab1 ) repeat scroll 0 0 #67497a !important;
    background: -moz-linear-gradient( #67497a,#946ab1 ) repeat scroll 0 0 #67497a !important; /* FF3.6+ */
    background: -webkit-linear-gradient( #67497a,#946ab1 ) repeat scroll 0 0 #67497a !important; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient( #67497a,#946ab1 ) repeat scroll 0 0 #67497a !important; /* Opera 11.10+ */
    background: -ms-linear-gradient( #67497a,#946ab1 ) repeat scroll 0 0 #67497a !important; /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67497a', endColorstr='#946ab1',GradientType=0 ); /* IE6-9 */   
}

.custom-navbar ul li a.ui-btn-active {
    background: linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5 !important;
    background: #67497a; /* Old browsers */
    background: linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5 !important; /* FF3.6+ */
    background: -webkit-linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5 !important; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5 !important; /* Opera 11.10+ */
    background: -ms-linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5 !important; /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5393C5', endColorstr='#6FACD5',GradientType=0 ); /* IE6-9 */       
}
于 2013-07-23T20:16:53.590 回答
2

覆盖.ui-navbar a类：

.ui-navbar a {
  /* changes here */
}

或者制作一个自定义类：

.ui-custom-navbar {
  /* changes here */
}

然后将其添加<a>到.ui-navbar.

$('.ui-navbar a').addClass('ui-custom-navbar')

演示

于 2013-07-23T14:57:11.033 回答
0

一种方法是创建自己的顶级课程。

例子：

<body class="myclass">

一些CSS：

.myclass .classToOverride {
//some styles
}

另外，我注意到在您的代码中，您的导航栏上目前没有课程。所以你可能需要添加一个。

于 2013-07-23T14:55:32.343 回答