Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.04.2012, 08:32
Новичок на форуме
Отправить личное сообщение для Scorpio2011 Посмотреть профиль Найти все сообщения от Scorpio2011
 
Регистрация: 26.01.2011
Сообщений: 2

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

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


При нажатии на ссылку "Раздел 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>
Ответить с цитированием
  #2 (permalink)  
Старый 23.04.2012, 10:34
Кандидат Javascript-наук
Отправить личное сообщение для vuler Посмотреть профиль Найти все сообщения от vuler
 
Регистрация: 16.02.2012
Сообщений: 109

ну сделай топорно, введи переменную в которой будет находится позиция твоей стрелки например var position="left" или "right" а после тыка в $("#right").click сделай условие if(position!="right")
$(".col-module-header-top").animate({"left": "+=295px"}, "slow");
но конечно можно все и покрасивее обыграть, но тут вроде простой случай можно и так.
Ответить с цитированием
  #3 (permalink)  
Старый 23.04.2012, 12:18
Новичок на форуме
Отправить личное сообщение для Scorpio2011 Посмотреть профиль Найти все сообщения от Scorpio2011
 
Регистрация: 26.01.2011
Сообщений: 2

Сообщение от vuler Посмотреть сообщение
ну сделай топорно, введи переменную в которой будет находится позиция твоей стрелки например var position="left" или "right" а после тыка в $("#right").click сделай условие if(position!="right")
$(".col-module-header-top").animate({"left": "+=295px"}, "slow");
но конечно можно все и покрасивее обыграть, но тут вроде простой случай можно и так.
Спасибо за подсказку. Мне тоже на одном форуме посоветовали с условием сделать. Я чет даже как-то и недодумался о нем )
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
нужна помощь тех кто разбирается. igoryk jQuery 2 20.10.2010 18:42
Нужна помощь, если можно Fox-WNT Общие вопросы Javascript 3 27.07.2010 10:38
Очень нужна помощь с Ext JS dcbal ExtJS 1 09.07.2010 12:15
нужна помощь Sergiy Серверные языки и технологии 2 31.03.2010 19:16
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 01:17