title: how to highlight selected jquery ui tab?
body: <p>I've learned how to create a jquery ui tab, thanks to <a href="http://jqueryui.com/tabs" rel="nofollow">http://jqueryui.com/tabs</a>, and customized the look of it. I've been searching the web on how to highlight a selected tab by changing it's background color when someone clicks on it. So far, it's been frustrated and unsuccessful.</p>
  
  <p>Here's the <strong>HTML Code</strong> Use:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css" &gt;
  
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"&gt;&lt;/script&gt;
  
   &lt;script&gt;
  $(function() {
  $( "#tabs" ).tabs();
  });
  &lt;/script&gt;
  
  &lt;title&gt;Jquery Tab Test&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="tab-wrapper"&gt;
  &lt;div id="tabs"&gt;
  
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#tabs1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;br class="clearboth" /&gt;
  
  &lt;div id="tabs1" class="tab-content"&gt;
  Content 1
  &lt;/div&gt;
  
  &lt;div id="tabs2" class="tab-content"&gt;
  Content 2
  &lt;/div&gt;
  
  &lt;div id="tabs3" class="tab-content tabs3"&gt;
  Content 3
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>and <strong>CSS</strong>:</p>
  
  <pre><code>body, html {
      height: 101%;
  }
  
  body {
      font-family: arial;
  }
  
  .clearboth {
      clear: both;
      padding: 0;
      margin: 0;
  }
  #tab-wrapper {
      background-color: #f00fff;
      border: solid 1px #909090;
      padding: 5px;
      width: 330px;
  }
  
  #tabs {
      overflow: hidden;
  }
  
  #tabs ul li,
  #tabs ul { 
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  #tabs ul a {
      float: left;
      padding: 5px;
      display: block;
      width: 100px;
      text-align: center;
      text-decoration: none;
      color: #000000;
      height: 20px;
      line-height: 20px;
      font-size: 10pt;
      font-weight: bold;
      background-color: #cccccc;
  }
  
  #tabs ul a:hover {
      background-color: #f1f1f1;
  }
  
  #tabs .tab-content {
      padding: 5px;
      display: block;
      background-color: #f1f1f1;
      font-size: 10pt;
      height: 300px;
      border-top: solid 1px #000000;
  }
  </code></pre>
  
  <p>Please help if anyone can.</p>