css - jQuery Mobile中列表屏幕的渐变效果

我正在使用MObile应用，我有导航栏（星期日，星期一，星期二）的列表屏幕，并且我为导航栏分配了3种不同的颜色。
我需要的是，如果我在星期天单击，则该特定清单列表屏幕应显示特定（略渐变）的颜色。 （因为我想根据颜色区分3个列表屏幕）。提前致谢 。
我当前的代码是

<div data-role="page" data-theme="a" data-content-theme="a">
 <div data-role="header" data-position="fixed" data-theme="b">
<h1>Index</h1>
 </div>
 <form id="form1" >
  <div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#sunday" class="sunday"  data-ajax="false" >sunday</a></li>
      <li><a href="#monday" class="monday" data-ajax="false" >monday</a></li>
      <li><a href="#tuesday" class="tuesday" data-ajax="false" >tuesday</a></li>
    </ul>
  </div>
   <div class="ui-filterable" >
    <input id="filterBasic-input" data-type="search" placeholder="Search ">
  </div>
  <div data-role="content" id="sunday">
    <div class="content-primary" >
      <ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-icon="false">
        <li class="custom">
          <h3><a href="#" style="text-decoration:none;color:#333333;" >Row1</a></h3>
          <p class="topic"><strong>sub</strong></p>
          <p>date</p>
          <p class="ui-li-aside"> <span> <a href="#"><img src="http://lorempixel.com/26/26/food/1/" ></a> </span></p>
        </li>
        <li>
          <h3><a href="#" style="text-decoration:none;color:#333333;">Row2</a></h3>
          <p class="topic"><strong>sub </strong></p>
          <p>date</p>
          <p class="ui-li-aside"> <span> <a href="#"><img src="http://lorempixel.com/26/26/food/1/" ></a> </span></p>
        </li>
      </ul>
    </div>
  </div>
 <div data-role="content" id="monday">
    <div class="content-primary" >
      <ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-icon="false">
        <li>
          <h3><a href="#" style="text-decoration:none;color:#333333;">Row1</a></h3>
          <p class="topic"><strong>sub</strong></p>
          <p>date</p>
          <p class="ui-li-aside"> <span><a href="#popupLogin" data-rel="popup" data-position-to="window"  data-transition="pop"><img src="http://lorempixel.com/26/26/food/1/" ></a></span> </p>
        </li>
        <li>
          <h3><a href="#" style="text-decoration:none;color:#333333;">Row2</a></h3>
          <p class="topic"><strong>sub</strong></p>
          <p>date</p>
          <p class="ui-li-aside"> <span><a href="#popupLogin" data-rel="popup" data-position-to="window"  data-transition="pop"><img src="http://lorempixel.com/26/26/food/1/" ></a></span> </p>
          </a></li>
      </ul>
    </div>
  </div>
  <div data-role="content" id="tuesday">
    <div class="content-primary" >
      <ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-icon="false">
        <li>
          <h3><a href="#" style="text-decoration:none;color:#333333;font-weight:normal;">Row1</a></h3>
          <p class="topic">sub</p>
          <p>date</p>
          <p class="ui-li-aside"> <span> <a href="#popupLogin" data-rel="popup" data-position-to="window"  data-transition="pop"><img src="http://lorempixel.com/26/26/food/1/" ></a></span>
        </li>
        <li>
          <h3><a href="#" style="text-decoration:none;color:#333333;font-weight:normal;">Row2</a></h3>
          <p class="topic">sub</p>
          <p>date</p>
          <p class="ui-li-aside"> <span> <a href="#popupLogin" data-rel="popup" data-position-to="window"  data-transition="pop"><img src="http://lorempixel.com/26/26/food/1/" ></a></span>
        </li>
      </ul>
    </div>
    </div>
   </div>
   </form>
   </div>
   **css**
   .sunday{
background: #f58f8f !important;}
    .monday{
background: #a3c9e9 !important;}
    .tuesday{
background: #f6d777 !important;}

最佳答案

您需要一些Click函数和addClass选项。还为您添加了一些li标签类，以便addclass知道在何处添加类以更改颜色。

  $(".sunday").click(function() {
    $(".custom").addClass("sunday");
  });

  $(".monday").click(function() {
    $(".customb").addClass("monday");
  });

 $(".tuesday").click(function() {
    $(".customc").addClass("tuesday");
  });

我为你做了一个演示

http://jsfiddle.net/Mwaw5/