Tabs content via Ajax -- Overriding css property

Tabs content via Ajax -- Overriding css property

I am trying to set a background color on active Tab and its Tab content by overriding css property.

JavaScript code is as follows;

<script>
  $(function() {
       $("nav.ui-tabs-active").css("background-color","LightYellow");  
       $("nav.ui-tabs-loading").css("background-color","LightYellow"); 
       $( "#tab_menu" ).tabs({
             beforeLoad: function( event, ui ) {
             ui.jqXHR.error(function() {
                ui.panel.html(
                  "Ajax通信による指定されたHTMLファイルのローディングに失敗しました。");







        });

      }

    });

  });

  </script>

Althogh the plugin itself works, background color specified does not appear on active tag nor content, either.

I would appreciate if someone could help me on this matter.

The URL of the page is : http://manabi3.my.zmx.jp/fldr_lesson/pc_crs_javascript/sample_program/page_sample_05_14_ui.html