Форум

kaminskys · #1 (**permalink**) 10.10.2011, 17:43

Здраствуйте!
Помогите пожалуйста разобратся с jquery....
У меня есть список меню.... при активной ссылке елемент меню выделяется определенным цветом.... Мне нужно чтобы при нажатии на ссылку, У нее свойство class было active... когда нажимаешь на другую ссылку тот class стал active, а предыдущий что бы вообщеничего не прописывало....
Зарание спасибо....

DjDiablo · #2 (**permalink**) 10.10.2011, 21:14

// вешаем на каждую ссылку обработчик
$(".menuitem").click(function(){
  // удаляем у старого элемента, класс   activeClass    
  $(".activeClass").removeClass("activeClass");

  // добавляем к ссылки по которой щёлкнули класс activeClass
  $(this).addClass("activeClass");
});

Все ссылки которых косается этот плагин должны иметь класс menuItem.

Альтернативное решение, вешающие обработчик на все ссылки, внутри элемента с классом меню.

// вешаем на каждую ссылку внутри .menu обработчик
$(".menu").find("a").click(function(){
  // удаляем у старого элемента, класс   activeClass    
  $(".menu .activeClass").removeClass("activeClass");
  // добавляем к ссылки по которой щёлкнули класс activeClass
  $(this).addClass("activeClass");
});

kaminskys · #3 (**permalink**) 11.10.2011, 22:30

я новичок, и плохо разбираюсь.... можете сказать куда этот код прописывать... как его повешать на ссылку....

kaminskys · #4 (**permalink**) 11.10.2011, 23:51

вот код меню

<ul class="artmenu">
                        <li><a " href="index.html" ><span><span>Новости</span></span></a></li>
                        <li><a href="index.html" ><span><span>Статьи</span></span></a>
                      </li>
                        <li><a href="rep.html"><span><span>Исходники</span></span></a></li>
                        
                                    </li>
                        <li><a href="leng.html"><span><span>FAQ</span></span></a></li>
                      <li><a href="text.html"><span><span>Гостевая книга</span></span></a></li>
                      <li><a href="text.html"><span><span>Обратная связь</span></span></a></li>
				    </ul>

DjDiablo · #5 (**permalink**) 12.10.2011, 00:01

У вас по щелчку будет происходит переход на другую страницу, вы эфекта от скрипта не увидите.
Скрипт то на старой странице, а вы уходите на новую, стиль изменился и тут же изменилась страница, в итоге измененный стиль некто не успеет даже рассмотреть. Изменённый скриптом класс сам собой на новую страницу неперекачует ))

Раз у вас меняется меню вместе со страницей, может вам проще дописать класс к элементу на каждой странице, и не надо ни какого программирования..

обьясните пожалуйста что же вы хотите. Может страницы указанные в меню грузятся по ajax.

DjDiablo · #6 (**permalink**) 12.10.2011, 00:17

Рабочий для ajax.

<html>
  <HEAD>
      <script src="http://yandex.st/jquery/1.6.4/jquery.min.js"></script>
      <STYLE type="text/css">
       <!--
       .activeClass{
          color:blue;   
          font-size: 20pt;
       }
  -->
  </STYLE>

  </HEAD>
<body>

<ul class="artmenu">
                        <li><a " href="#" ><span><span>Новости</span></span></a></li>
                        <li><a href="#" ><span><span>Статьи</span></span></a>
                      </li>
                        <li><a href="#"><span><span>Исходники</span></span></a></li>
                        
                                    </li>
                        <li><a href="#"><span><span>FAQ</span></span></a></li>
                      <li><a href="#"><span><span>Гостевая книга</span></span></a></li>
                      <li><a href="#"><span><span>Обратная связь</span></span></a></li>
				    </ul>

<script type="text/javascript">
// вешаем на каждую ссылку внутри .menu обработчик

$(".artmenu").find("a").click(function(){
  // удаляем у старого элемента, класс   activeClass    
  $(".artmenu .activeClass").removeClass("activeClass");
  // добавляем к ссылки по которой щёлкнули класс activeClass
  $(this).addClass("activeClass");
});

</script>

</body>
</html>

Ссылки на страницы я заменил на #, чтобы не происходил переход, иначе бы демо не работало.

kaminskys · #7 (**permalink**) 13.10.2011, 17:47

очень вам благодарен что помогаете мне.... У меня все работает если отключаю style.css, но когда с ним работать не хочет....
вот код css для ссылок

.artmenu a.active span span
{
  color: #2D4453;
  background-position: left -58px;
}

подскажите как прописать в javascript'е это...
и еще, страница с меню у меня грузится полностю сново... Вот к примеру мы находимся на странице "новости", кликаем на страницу "статьи", страница перегружается заново... нужно, чтобы при клике на новую ссылку ее атрибут class стал active, а все остальные ссылки имели атрибут class пустым

Kerovan · #8 (**permalink**) 21.08.2013, 00:02

А как добавить класс изображениям. Есть сайт в котором автор в визуальном редакторе добавляет картинки, все что на данный момент есть уже прописаны классы в коде, те что добавляются в визуальном редакторе естесственно этого класса не имеют. Как сделать чтоб всем добавленным в редакторе изображениям добавить класс, например class="first"?

DjDiablo · #9 (**permalink**) 21.08.2013, 07:19

Нефига непонятный вопрос

Всем изображениям в редакторе добавлен класс first.

$('img').addClass("first");

Гораздо более прикольный вопрос это в какой именно момент времени ты планируешь добавлять классы в картинках ? Сразу как картинка добавлена в визуальном редакторе или допустим по нажатию какойто волшебной кнопки ?

Kerovan · #10 (**permalink**) 21.08.2013, 17:02

Сразу как только добавиться

Форум

Справочник

Discord чат

Курсы javascript