[Scorpio2011]

В общем, переделываю шаблон для сайта, почти все закончил, но возникла проблема с менюшкой. Показываю на скриншотах что да как.
Меню с двумя разделами, реализовано по принципу меню-закладки.

Это первое раздел меню


При нажатии на ссылку "Раздел 2" появляется с помощью .hide() и .show() появляется второй раздел в этом же меню. При этом так сказать "стрелочка" перемещается с помощью .animate от одной ссылки к другой


Вот такое мне меню нужно. Но если еще раз нажать на ссылку "Раздел 2", эта "стрелочка" убегает за экран, вот скриншот:


Вот тут у меня и возникла проблема, как сделать так чтобы при втором щелчке эта стрелочка не убегала а осталась на месте, ну или в крайнем случае переключалась на "Раздел 1".

Прилагаю код к описанию. В Jquery не селён я, мне больше по душе PHP, вот по этому и прошу помощи. Сильно не ругайте за Jquery код, ибо я в нем мало что соображаю, на примерах вчера пытался что-то сделать.

/*Jquery код в HEAD*/


<script>
$(window).ready(function () {
      $("#tab2").hide();
      $("#tab1").show();
      $("#right").animate({opacity: 0.4,}, 500);
});

  $(document).ready(function(){

    $("#left").click(function(){
      $(".col-module-header-top").animate({"left": "-=295px"}, "slow");
      $("#right").animate({opacity: 0.4,}, 500);
      $("#left").animate({opacity: 1,}, 500);
      $("#tab2").hide(500);
      $("#tab1").show(500);
    });
    
    $("#right").click(function(){
      $(".col-module-header-top").animate({"left": "+=295px"}, "slow");
      $("#left").animate({opacity: 0.4,}, 500);
      $("#right").animate({opacity: 1,}, 500);
      $("#tab1").hide(500);
      $("#tab2").show(500);


    });

  });
  </script>


/*код меню*/

<div class="col-module">
  <div class="col-module-style1">
    <div class="col-module-header">
      <div class="mod-title-left" id="left"><a href="#"><i>Раздел 1</i></a></div>
<div class="mod-title-right" id="right"><a href="#"><i>Раздел 2</i></a></div>
      <div class="col-module-header-top"></div>
    </div>  

<div class="clearfix">
<div class="lofmenu_jshopping">
<ul class="lofmenu">
<div id="tab1">
  <li class="lofitem1"> <a href="/" ><span>Категория раздела 1</span></a></li>
  <li class="lofitem1"><a href="/" ><span>Категория раздела 1</span></a></li>
  <li class="lofitem1"><a href="/" ><span>Категория раздела 1</span></a></li>
  <li class="lofitem1"><a href="/" ><span>Категория раздела 1</span></a></li>
  <li class="lofitem1"><a href="/" ><span>Категория раздела 1</span></a></li>

</div>
<div id="tab2">
  <li class="lofitem1"><a href="/" ><span>Категория раздела 2</span></a></li>
  <li class="lofitem1"><a href="/" ><span>Категория раздела 2</span></a></li>
  <li class="lofitem1"><a href="/" ><span>Категория раздела 2</span></a></li>
  <li class="lofitem1"><a href="/" ><span>Категория раздела 2</span></a></li>
  <li class="lofitem1"><a href="/" ><span>Категория раздела 2</span></a></li>
  <li class="lofitem1"><a href="/" ><span>Категория раздела 2</span></a></li>
</div>
</ul>              
  </div>
</div>