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

Тема в разделе "JavaScript", создана пользователем artefakt777, 3 мар 2014.

Модераторы: ZiX
  1. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    474
    Симпатии:
    119
    Собственно, как реализовать смену фона на странице, при нажатие на ссылку.
     
  2. Genk0

    Genk0 Инквизитор из раздела J!

    Moderator
    Регистр.:
    2 июн 2010
    Сообщения:
    1.645
    Симпатии:
    1.349
    Можно на jquery
    Подключаем jquery
    <script>
    $(document).ready(function(){
    $("#link").click(function(){
    $("#body").css('background','#ccc')
    });
    });
    </script>
    где #link - id ссылки
    #body - id тега body
     
    artefakt777 нравится это.
  3. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    474
    Симпатии:
    119
    Т.е. в индекс вставляем код:
    <script>
    $(document).ready(function(){
    $("123").click(function(){
    $("321").css('background','#ccc')
    });
    });
    </script>

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

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

    Genk0 Инквизитор из раздела J!

    Moderator
    Регистр.:
    2 июн 2010
    Сообщения:
    1.645
    Симпатии:
    1.349
    Внимательнее!!!
    $("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 (что укажешь в скрипте)
     
  5. albbi

    albbi Создатель

    Регистр.:
    19 июл 2013
    Сообщения:
    32
    Симпатии:
    4
    Не морочьте голову и сделайте еще проще одной строчкой, вот так (это необходимо присвоить ссылке), где 'body' — id элемента body:

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

    Не будет никакого перехода по ссылке, если в качестве адреса ссылки используется "#"
     
    Последнее редактирование модератором: 10 мар 2014
    Vishez нравится это.
  6. MagicNoob

    MagicNoob Создатель

    Регистр.:
    27 фев 2014
    Сообщения:
    15
    Симпатии:
    3
    Перехода-то не будет, но страница вверх прокрутится
     
  7. albbi

    albbi Создатель

    Регистр.:
    19 июл 2013
    Сообщения:
    32
    Симпатии:
    4
    Страница действительно прокручивается вверх, при нажатии на ссылку, но есть способ этого избежать. Я попробовал сделать вот что, использовать в качестве ссылки: "#text", где text - какое-нибудь слово.
     
  8. Genk0

    Genk0 Инквизитор из раздела J!

    Moderator
    Регистр.:
    2 июн 2010
    Сообщения:
    1.645
    Симпатии:
    1.349
    в случае onClick дописываем через точку с запятой onclick='код замены фона; return false;'
    в случае просто ссылки с кодом jquery - onclick='return false;'
     
  9. kronos2003

    kronos2003 Писатель

    Регистр.:
    25 фев 2009
    Сообщения:
    7
    Симпатии:
    0
    не понятно было должно ли быть вообще что-то в href, поэтому и поставил #/
    ну тогда как предлагают - дописывать return false; или в href можно написать
    Код:
    href="javascript:void(0)"
    тут на ваш выбор.
     
  10. bernex

    bernex Создатель

    Регистр.:
    23 авг 2013
    Сообщения:
    11
    Симпатии:
    0
    Да действительно самый лучший вариант и не надо думать о переходах и тп:

    Код:
    $(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';
      });