Изменение вида страницы при переходе по пунктам меню

Подскажите, как можно реализовать такую вещь:
----------------------------------------------------------
Сайт визитка фирмы.
Расположение блокв очень простое.

1.Над header-oм в верхнем левом углу - лого (узображение).
2.Header
3.Под Header-ом находится топ-меню (основной цвет черный).
Нужно чтобы при нажатии на пункты меню (фон активного меню становится белым - реализовано!) менять цвет фона топ-меню, цвет фона footer и менять изображение лого

 

A как прописывается код? В index.php. Но как именно указать конкретный элемент?
можете пояснить на примере:
вот так генерится меню:

Код (PHP):

1. <!--  Topmenu  -->
2. ►<div  id="topmenu">
3.   ▼<ul class="menu">
4.        ► <li class="item-110 parent">...</li>
5.        ▼  <li class="item-111 cuрent active deepeр paрent">
6.                <a href="/index.php/produkti">Produkti</a> ► <ul>...</ul> </li>
7.         ► <li class="item-112 parent">...</li>
8.         ► <li class="item-113 parent">...</li>
9.         ► <li class="item-147 parent">...</li>
10.         ► <li class="item-148">...</li>
11.         ► <li class="item-149">...</li> </ul>

вот на активную вкладку "item-111 и надо повесить тригеры
------------------------------------------

а вот CSS:

Код (PHP):

1. /** Topmenu **/
2. #topmenu {
3.     margin: auto;
4.     width: 1000px;
5.     padding-left: 0px;
6.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
7.     font-weight: 500;
8.     font-size: 9pt;
9.     color: #fff;
10.     background:   linear-gradient(#153828, #173124, #088958);
11.     overflow: auto;
12. }
13. #topmenu ul {
14.        float: right;
15.     padding: 0;
16.     padding-top: 8px;
17.     padding-bottom: 0px;   
18.     margin: 0;
19.     list-style: none;
20. }
21. #topmenu li.active {
22.     background:  linear-gradient(gray, white, white, white);
23.     color: #000;
24.    border-top-right-radius: 6px;
25.     border-top-left-radius: 6px;
26.     border-bottom-left-radius: - 6px;
27.     margin-bottom: 0px;
28. }
29. #topmenu li.active a {
30.        padding-top: 2px;
31.     padding-bottom: 3px;
32.     color: #5F5F5F;
33.     font-weight: 600;
34. }
35. #topmenu a {
36.        display: block;
37.     color: #fff;
38.     padding-top: 0px;
39.     padding-bottom: 0px;
40.     padding-left: 11px;
41.     padding-right: 11px;
42.     margin-left: 10px;
43.     margin-right: 10px;
44.     margin-bottom: 1px;
45.     text-decoration:none;
46.     text-transform: uppercase;
47. }
48. #topmenu a:hover {
49.        color: #c1c1c1;
50.     text-decoration: none;
51. }
52. #topmenu li {
53.        float: left;
54.     border-left: 1px solid #565656;
55. }
56. #topmenu li:first-child {
57.         border-left: 0px solid #000000;
58. }

пробовал так:

Код (html):

1. $(document).ready(function() {
2.     $("div#topmenu .item-113 parent").click(function() {
3.         $("#logo").css("background", "url('../images/powered_by.png')");
4.         $("#topmenu").css("background", "#ff0000");
5.         $("#copyright").css("background", "#ff0000");
6.     });
7. });

но если честно, сути не понимаю

 

Вы как обычно, в своем "менторском" репертуаре. Не хотите помогать, не помогайте!
Но форум сделан именно для этого. Здесь собираются именно неспециалисты.
Кое какие основы я знаю.
Непонятно, как прицепить тригеры изменения оформления на конкретный элемент меню, который находится в классе
А именно <li class="item-111

 

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

Код (PHP):

1. /** 1 **/
2. $(document).ready(function() {
3.     $("item-113").click(function() {
4.         $(".logo").css("background", "url('../images/logo2.png')");
5.         $(".topmenu").css("background", "#ff0000");
6.         $(".copyright").css("background", "#ff0000");
7.     });
8. });
9. /** 2 **/
10. $(document).ready(function() {
11.     $("item-113").click(function() {
12.         $("logo").css("background", "url('../images/logo2.png')");
13.         $("topmenu").css("background", "#ff0000");
14.         $("copyright").css("background", "#ff0000");
15.     });
16. });
17. /** 3 **/
18. $(document).ready(function() {
19.     $("item-113").click(function() {
20.         $("#logo").css("background", "url('../images/logo2.png')");
21.         $("#topmenu").css("background", "#ff0000");
22.         $("#copyright").css("background", "#ff0000");
23.     });
24. });
25. /** 4 **/
26. <script type="text/javascript">
27. document.getElementByClass("item-113").click(function() {
28.     document.getElementById("logo").src="../images/logo2.png";
29.     document.getElementById("topmenu").style.backgroundColor = '#ff0000';
30.     document.getElementById("copyright").style.backgroundColor = '#ff0000';
31. });
32. /** 5 **/
33. jQuery(document).ready(function() {
34.      jQuery("item-113").click(function() {
35.          jQuery('.logo').css("background", "url('../images/powered_by.png')");
36.          jQuery('.topmenu').css("background", "#ff0000");
37.          jQuery('.copyright').css("background", "#ff0000");
38.     });
39. });

может проблема в синтаксисе или неправильном указании начального элемента "item-113"....

 

Снова вы туда же... Ну неужели вы думаете, я не искал решения и не изучал вопрос...
Просто я не могу понять сути, что у меня не работает ..... !?
Или не могу получить элемент с помощью Jquery, или не работает селектор на элементе.....
так генерится меню:

Код (PHP):

1. <!--  Topmenu  -->
2. ►<div  id="topmenu">
3.   ▼<ul class="menu">
4.        ► <li class="item-110 parent">...</li>
5.        ▼  <li class="item-111 cuрent active deepeр paрent">
6.                <a href="/index.php/produkti">Produkti</a> ► <ul>...</ul> </li>
7.         ► <li class="item-112 parent">...</li>
8.         ► <li class="item-113 parent">...</li>
9.         ► <li class="item-147 parent">...</li>
10.         ► <li class="item-148">...</li>
11.         ► <li class="item-149">...</li> </ul>

вот фрагмент кода в index.php

Код (PHP):

1. <?php
2. <head>
3.   <jdoc:include type="head" />
4.   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
5.   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
6.   <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
7.   <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/sfhover.js"></script>
8.   <?php if (($this->countModules('position-15') && $slides == 2) || ($slides == 1)): ?>
9.   <!-- Slides Scripts -->
10.   <?php if ($loadjquery): ?>
11.   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
12.   <?php endif; ?>
13.   <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/slides.js"></script>
14.   <script type="text/javascript">
15.     jQuery(document).ready(function(){
16.       jQuery('#slides').slides({
17.         play: 5000,
18.         pause: 2500,
19.         hoverPause: true<?php if ($slideseffect == 1): ?>,
20.         effect: 'fade',
21.         crossfade: true,
22.         fadeSpeed: 500<?php endif; ?>
23.       });
24.     });
25.     jQuery(document).ready(function() {
26.       jQuery("#slides").hover(function() {
27.           jQuery(".slides_nav").css("display", "block");
28.         },
29.           function() {
30.           jQuery(".slides_nav").css("display", "none");
31.         });
32.  
33.     });
34. $(document).ready(function() {
35.     $("div#topmenu .item-113 parent").click(function() {
36.         $("#logo").css("background", "url('../images/powered_by.png')");
37.         $("#topmenu").css("background", "#ff0000");
38.         $("#copyright").css("background", "#ff0000");
39.     });
40. });
41.   </script>
42.   <?php endif; ?>
43. </head>

что я делаю не так?

 

все верно...
на примерах все работает. А у меня нет! И не могу понять что не так
Руководствовался этим:
http://anton.shevchuk.name/javascript/jquery-for-beginners/
Как получить элемент с помощью jQuery?

$(“#header”) – получение элемента с id=”header”
$(“h3″) – получить все <h3> элементы
$(“div#content .photo”) – получить все элементы с классом =”photo” которые находятся в элементе div с id=”content”
$(“ul li”) – получить все <li> элементы из списка <ul>
$(“ul li:first”) – получить только первый элемент <li> из списка <ul>

в моем варианте, посмотрите что написано неверно. Мой код последний в блоке "head"

 

фу....!!! Заработало вот в таком варианте:

Код (html):

1. jQuery(document).ready(function() {
2.     jQuery("li.item-113").click(function() {
3.         jQuery("#logo").css("background", "url('../images/powered_by.png')");
4.         jQuery("#topmenu").css("background", "#ff0000");
5.         jQuery("#copyright").css("background", "#ff0000");
6.     });
7. });

Всем большое спасибо!

 

Спасибо Вам Александр! Все работает!

Но засада!
Нажатие мыши на пункт меню, включает обработчик события и вызывает смену оформления но кратковременно (1 сек).
Как сделать так, чтобы после селектора .click сохранялись полученные изменения?
Не подскажите, где копать....!?

 

Частично вы правы.
Но в моем случае замена оформления происходит у обьектов(#logo- лого в лэйере, #topmenu - меняет фон полосы меню, #copyright - меняет фон полосы внизу страницы), которые не являются элементами пункта меню, на который происходит клик.
Пробовал по разному.
Пытался смотреть сценарии работы скриптов через FB.
Ставил свой скрипт в область элемента, переносил в "body", в самый низ документа.
Пытался переопределить порядок выполнения js скриптов, т.е. расставить порядок вывода js файлов. Что-то типа:

Код (PHP):

1. function hook_js_alter(&$javascript) {  
2.     $javascript['misc/jquery.js']['weight'] = 0;
3.     $javascript['script.js']['weight'] = 1;
4. }

не получилось ...
Не хотелось бы сдаваться, но сам не могу понять, как увидеть тот обработчик, который сбрасывает мой js скрипт.
Склоняюсь к тому, чтобы сделать еще один шаблон с измененным .css и по клику на пункте меню менять оформление таким образом