Tabs open according to links on sub menu

[thara]

In my main navigation bar there is a menu named category & item and it has two submenus which names are category and item respectively. I have only one page to display these two section.

 

My page is category_item.php and it has two different tabs to display each sections. In this case it iscategory and item.

So my problem is I need to open category and item tab when clicking on category and item links on the submenu.

 

This is code from main navigation bar

<li class="current">
  <a>Category & Item</a>
  <div class="menu-container">
   <div class="menu-link">
     <a href="">Category</a>
   </div>
   <div class="menu-link current">
     <a href="">Item</a>
   </div>
 </div>
</li>

This is from category_item.php page

<div class="ui-widget-header ui-corner-top">
  <ul>
    <li><a href="#tabs-1">My Category</a></li>
    <li><a href="#tabs-2">My Items</a></li>
  </ul>
</div>

<div id="tabs-1" class="tabs3">
  my stuff...
</div>

<div id="tabs-21" class="tabs3">
  my stuff...
</div>

Can I know is it possible to do?

Thank you.

[Hazukiy]

Am I right in saying when that you want it so that when you hover over the tabs, it drops down a menu with your sub-tabs on them? If so I use jQuery for that. Here's the code I use for my site.

$(document).ready(function(){

	$(".al-menu-drop").parent().append("<span></span>");
	
	$(".al-menu-drop").click(function() {
		$(this).parent().find(".al-dropdown-list").slideDown('fast').show();
		$(".menu-icon").addClass("active-icon");
		
		$(this).parent().hover(function() {
		}, function(){	
			$(this).parent().find(".al-dropdown-list").slideUp('slow');
			$(".menu-icon").removeClass("active-icon");
		});

		}).hover(function() { 
			$(this).addClass("jq-al-button-hover");
		}, function(){
			$(this).removeClass("jq-al-button-hover");
	});
});