title: Gradient effect for listing screen in jquery mobile
body: <p>I'm working on MObile app,i have listing screen for that i have navbar (sunday, monday, tuesday), and i assigned 3 diffetent colous to navbar.
  what i need is if i click on sunday that particular (slightly-gradient) color should appear for that particluar listing screen. (because i want to differentiate between the 3 listing screens based on colours). Thanks in advance .
  My current code is</p>
  
  <pre><code>&lt;div data-role="page" data-theme="a" data-content-theme="a"&gt;
   &lt;div data-role="header" data-position="fixed" data-theme="b"&gt;
  &lt;h1&gt;Index&lt;/h1&gt;
   &lt;/div&gt;
   &lt;form id="form1" &gt;
    &lt;div data-role="tabs" id="tabs"&gt;
    &lt;div data-role="navbar"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#sunday" class="sunday"  data-ajax="false" &gt;sunday&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#monday" class="monday" data-ajax="false" &gt;monday&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tuesday" class="tuesday" data-ajax="false" &gt;tuesday&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
     &lt;div class="ui-filterable" &gt;
      &lt;input id="filterBasic-input" data-type="search" placeholder="Search "&gt;
    &lt;/div&gt;
    &lt;div data-role="content" id="sunday"&gt;
      &lt;div class="content-primary" &gt;
        &lt;ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-icon="false"&gt;
          &lt;li class="custom"&gt;
            &lt;h3&gt;&lt;a href="#" style="text-decoration:none;color:#333333;" &gt;Row1&lt;/a&gt;&lt;/h3&gt;
            &lt;p class="topic"&gt;&lt;strong&gt;sub&lt;/strong&gt;&lt;/p&gt;
            &lt;p&gt;date&lt;/p&gt;
            &lt;p class="ui-li-aside"&gt; &lt;span&gt; &lt;a href="#"&gt;&lt;img src="http://lorempixel.com/26/26/food/1/" &gt;&lt;/a&gt; &lt;/span&gt;&lt;/p&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;h3&gt;&lt;a href="#" style="text-decoration:none;color:#333333;"&gt;Row2&lt;/a&gt;&lt;/h3&gt;
            &lt;p class="topic"&gt;&lt;strong&gt;sub &lt;/strong&gt;&lt;/p&gt;
            &lt;p&gt;date&lt;/p&gt;
            &lt;p class="ui-li-aside"&gt; &lt;span&gt; &lt;a href="#"&gt;&lt;img src="http://lorempixel.com/26/26/food/1/" &gt;&lt;/a&gt; &lt;/span&gt;&lt;/p&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;div data-role="content" id="monday"&gt;
      &lt;div class="content-primary" &gt;
        &lt;ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-icon="false"&gt;
          &lt;li&gt;
            &lt;h3&gt;&lt;a href="#" style="text-decoration:none;color:#333333;"&gt;Row1&lt;/a&gt;&lt;/h3&gt;
            &lt;p class="topic"&gt;&lt;strong&gt;sub&lt;/strong&gt;&lt;/p&gt;
            &lt;p&gt;date&lt;/p&gt;
            &lt;p class="ui-li-aside"&gt; &lt;span&gt;&lt;a href="#popupLogin" data-rel="popup" data-position-to="window"  data-transition="pop"&gt;&lt;img src="http://lorempixel.com/26/26/food/1/" &gt;&lt;/a&gt;&lt;/span&gt; &lt;/p&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;h3&gt;&lt;a href="#" style="text-decoration:none;color:#333333;"&gt;Row2&lt;/a&gt;&lt;/h3&gt;
            &lt;p class="topic"&gt;&lt;strong&gt;sub&lt;/strong&gt;&lt;/p&gt;
            &lt;p&gt;date&lt;/p&gt;
            &lt;p class="ui-li-aside"&gt; &lt;span&gt;&lt;a href="#popupLogin" data-rel="popup" data-position-to="window"  data-transition="pop"&gt;&lt;img src="http://lorempixel.com/26/26/food/1/" &gt;&lt;/a&gt;&lt;/span&gt; &lt;/p&gt;
            &lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div data-role="content" id="tuesday"&gt;
      &lt;div class="content-primary" &gt;
        &lt;ul data-role="listview" data-filter="true" data-input="#filterBasic-input" data-icon="false"&gt;
          &lt;li&gt;
            &lt;h3&gt;&lt;a href="#" style="text-decoration:none;color:#333333;font-weight:normal;"&gt;Row1&lt;/a&gt;&lt;/h3&gt;
            &lt;p class="topic"&gt;sub&lt;/p&gt;
            &lt;p&gt;date&lt;/p&gt;
            &lt;p class="ui-li-aside"&gt; &lt;span&gt; &lt;a href="#popupLogin" data-rel="popup" data-position-to="window"  data-transition="pop"&gt;&lt;img src="http://lorempixel.com/26/26/food/1/" &gt;&lt;/a&gt;&lt;/span&gt; 
          &lt;/li&gt;
          &lt;li&gt;
            &lt;h3&gt;&lt;a href="#" style="text-decoration:none;color:#333333;font-weight:normal;"&gt;Row2&lt;/a&gt;&lt;/h3&gt;
            &lt;p class="topic"&gt;sub&lt;/p&gt;
            &lt;p&gt;date&lt;/p&gt;
            &lt;p class="ui-li-aside"&gt; &lt;span&gt; &lt;a href="#popupLogin" data-rel="popup" data-position-to="window"  data-transition="pop"&gt;&lt;img src="http://lorempixel.com/26/26/food/1/" &gt;&lt;/a&gt;&lt;/span&gt; 
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;/form&gt;
     &lt;/div&gt;
     **css**
     .sunday{
  background: #f58f8f !important;}
      .monday{
  background: #a3c9e9 !important;}
      .tuesday{
  background: #f6d777 !important;}
  </code></pre>