css - jquery mobile中列表屏幕的渐变效果

Question

我正在开发移动应用程序，我有用于导航栏(星期日、星期一、星期二)的列表屏幕，并且我为导航栏分配了 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;}

Answer 1

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

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

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

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

我给你做了个demo

http://jsfiddle.net/Mwaw5/