color each active tab a *different* color

by Akram kamal

HTML

<div id="tabs">
    <ul>
        <li id="tab1"><a href="#tabs-1"> First Tab</a>

        </li>
        <li id="tab2"><a href="#tabs-2">Second Tab</a>

        </li>
    </ul>
    <div id="tabs-1">one</div>
    <div id="tabs-2">two</div>
</div>

CSS

#tabs .ui-tabs-nav .ui-state-active a {
      color: black;
      font-family:"Arial";
      font-weight:bold;
  }
  #tab1 {
      background:orange;
  }
  #tab2 {
      background:blue;
  }
  #tabs-1 {
      background:pink;
  }
  #tabs-2 {
      background:lightblue;
  }
#tabs .ui-tabs-active { background:lightblue}

JavaScript

$("#tabs").tabs()