Jquery Tabs Help!!

[raajith]

Friends I am trying to incorporate jquery in my menu.

 

Visit

www.zedge.net

and see the navigation menu in middle (tabs) .It switches with the loading symbol I exactly need the same.

 

Visit

www.mozym.com

and see mine.I did everything for a Jquery but the jquery coding dosent work.

 

I would like this tab effect.

 

http://net.tutsplus.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/

 

 

MY HTML CODE :

 

 <div id="menu_middle">  
                    <ul id="middle_menu">   
                        <li class="wallpaper"><a href="#wallpaper">Wallpaper</a></li> 
                        <li class="ringtone"><a href="#ringtone">Ringtones</a></li>
                        <li class="video"><a href="#video">Videos</a></li>
                        <li class="theme"><a href="#theme">Themes</a></li> 
                        
                    </ul>        
                    
                    <div id="wallpaper" class="display_middle">
                        <br />
                        WALLPAPER CONTENT
                                
                            
                       
                        </div>  <!-- FOR WALLPAPERS -->
                        
                        <div id="theme" class="display_middle">
                        <br />
                        THEMES CONTENT
                        </div> <!-- FOR THEMES -->
                        
                        <div id="video" class="display_middle">
                        VIDEO CONTENTS
                        </div> <!-- FOR VIDEOS -->
                        
                        <div id="ringtone" class="display_middle">
                        <br />
                        RINGTONE CONTENTS
                                               
                        </div><!-- FOR RINGTONES -->
</div>

 

MY CSS CODE :

 

/*Middle Navigation Menu*/
ul#middle_menu{margin:0;padding:0;list-style: none;clear: both;}
  #middle_menu li{overflow:hidden;text-indent: -9999px;display:inline;float:left;}
  #middle_menu li a{background:url(../images/img/display_main.png)no-repeat;width:152px;height:36px;display:block;position:absolute;}
  
  
/*Wallpaper Button - Middle Navigation Menu*/
  #middle_menu li.wallpaper{width:150px;height:36px;}
  #middle_menu li.wallpaper a{background-position: 0px 0px;}
  #middle_menu li.wallpaper a:hover{background-position: 0px -42px}
  #middle_menu li.wallpaper a.selected{background-position: 0px -83px;}
  
/*Theme Button - Middle Navigation Menu */
  #middle_menu li.theme{width:150px;height:36px;}
  #middle_menu li.theme a{background-position: -450px 0px;}
  #middle_menu li.theme a:hover{background-position: -450px -42px}
  #middle_menu li.theme a.selected{background-position: -450px -83px;}
  
/*Ringtone Button - Middle Navigation Menu*/
  #middle_menu li.ringtone{width:150px;height:36px;}
  #middle_menu li.ringtone a{background-position: -150px 0px;}
  #middle_menu li.ringtone a:hover{background-position: -150px -42px}
  #middle_menu li.ringtone a.selected{background-position: -150px -83px;}
  
/*Video Button - Middle Navigation Menu*/
  #middle_menu li.video{width:150px;height:36px;}
  #middle_menu li.video a{background-position: -300px 0px;}
  #middle_menu li.video a:hover{background-position: -300px -42px;}
  #middle_menu li.video selected a{background-position: -300px -83px;}

/* To Hide Middle Menu Items Which Is Not In Use */

  .ui-tabs-hide{display: none;}

 

MY JQUERY CODE :

 

$(document).ready(function() {
    $('#menu_middle > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
    
});

 

I tried But didnt worked for me.I am new to jquery.I used a tutorial to do this.

The tutorial link is below.

 

http://nettuts.s3.amazonaws.com/042_jQueryUITabs/demo/index.html

 

.I used CSS Sprites for the menu.So I cant change the css code now.I installed Jquery and my jquery code correctly.I am in urgent plssssssss.

 

Thanks in advance

 

Regards,

Raajith.

[raajith]

Kindly hel me pleaseeeeeeeeeeeeeeeeeeee