Смена фона при нажатие

[artefakt777]

Собственно, как реализовать смену фона на странице, при нажатие на ссылку.

 

[Genk0]

Можно на jquery
Подключаем jquery
<script>
$(document).ready(function(){
$("#link").click(function(){
$("#body").css('background','#ccc')
});
});
</script>
где #link - id ссылки
#body - id тега body

 

[artefakt777]

Т.е. в индекс вставляем код:
<script>
$(document).ready(function(){
$("123").click(function(){
$("321").css('background','#ccc')
});
});
</script>

На нужной странице делаем такую ссылку: <a href="123">ссылка</a>

а в css прописываем стиль для 321 ?

 

[Genk0]

Внимательнее!!!
$("123").click(function(){ - не 123, а .123 или #123
к ссылке прописываем class="123" или id="123" соответственно
к тегу body дописываем id="321" или class="321"

#321 {background:#000;}

При нажатии на ссылку с id или классом 123 происходит замена css background:#ccc у тега c классом 321 или id 321 (что укажешь в скрипте)

 

[albbi]

Собственно, как реализовать смену фона на странице, при нажатие на ссылку.

Не морочьте голову и сделайте еще проще одной строчкой, вот так (это необходимо присвоить ссылке), где 'body' — id элемента body:

onclick="document.getElementById('body').style.background = '#cccccc'

2. если не планируете, то пишите сразу в html коде . Но в этом случае будет еще и переход по ссылке.

Не будет никакого перехода по ссылке, если в качестве адреса ссылки используется "#"

 

[MagicNoob]

Не будет никакого перехода по ссылке, если в качестве адреса ссылки используется "#"

Перехода-то не будет, но страница вверх прокрутится

 

[albbi]

Перехода-то не будет, но страница вверх прокрутится

Страница действительно прокручивается вверх, при нажатии на ссылку, но есть способ этого избежать. Я попробовал сделать вот что, использовать в качестве ссылки: "#text", где text - какое-нибудь слово.

 

[Genk0]

в случае onClick дописываем через точку с запятой onclick='код замены фона; return false;'
в случае просто ссылки с кодом jquery - onclick='return false;'

 

[kronos2003]

не понятно было должно ли быть вообще что-то в href, поэтому и поставил #/
ну тогда как предлагают - дописывать return false; или в href можно написать

href="javascript:void(0)"

тут на ваш выбор.

 

[bernex]

Да действительно самый лучший вариант и не надо думать о переходах и тп:

$(function(){
    $("#LINKID").click(function(e){
        e.preventDefault(); // предотвратить переход
        $("body").css('background','#ccc');
    });
});

и без jQuery

 var el = document.getElementById("LINKID");
  el.addEventListener("click", function(e){
    e.preventDefault();
    document.body.style["backgroundColor"] = '#cccccc';
  });