title: Changing the background color when tab is clicked on
body: <p>How can the background be changed to the exact same color when the tab is clicked on? Currently, it just remains the same color. Also would it be possible to have the first tab colored the same as the background color of the content area when the page is loaded?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;CSS-TABS | CSS-Only "DOM TABS"&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  
      #pagewidth { width: 760px; margin: 0 auto 0 auto; }
  
      #navigation { margin: 0 10em 0 0; background: #000000; color: #FFFFFF; }
      #navigation li { display: inline; padding: 0 2em 0 2em; }
  
      .content { background: #CCCCCC; height: 20em; padding: 1em;}
  
      a { color: #0066FF; }
      a:hover { color: #00CCFF; }
      a:active { font-weight:bold; }
  
      #container { height: 20em; overflow: hidden; }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="pagewidth"&gt;
  
      &lt;ul id="navigation"&gt;
          &lt;li&gt;&lt;a href="#c1"&gt;Content Block 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#c2"&gt;Content Block 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#c3"&gt;Content Block 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div id="container"&gt;
  
          &lt;div class="content"&gt;
              &lt;a name="c1" id="c1"&gt;&lt;/a&gt;
              &lt;h1&gt;Heading 1&lt;/h1&gt;
              &lt;p&gt;Here is some content, I hope that you like it!&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="content"&gt;
              &lt;a name="c2" id="c2"&gt;&lt;/a&gt;
              &lt;h2&gt;Heading 2&lt;/h2&gt;
              &lt;p&gt;Now that you have read content block 1, you can learn more in this block&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="content"&gt;
              &lt;a name="c3" id="c3"&gt;&lt;/a&gt;
              &lt;h3&gt;Heading 3&lt;/h3&gt;
              &lt;p&gt;In conclusion, content blocks are fun&lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- end container --&gt;
  
  &lt;/div&gt; &lt;!-- end pagewidth --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>