Изменение бэкграунда страницы

@Heidel · Регистрация: 11.10.2011

Студворк — интернет-сервис помощи студентам

На странице присутствует элемент для переключения бэкграунда страницы

html-код

HTML5
1
2
3
4
5
6
7
8
        <div id="selectBackground">
            <p>Select bg</p>
            <ul>
                <li><a href="javascript:void(0)" class="active"></a></li>
                <li><a href="javascript:void(0)"></a></li>
                <li><a href="javascript:void(0)"></a></li>
            </ul>
        </div> <!-- /selectBackground-->

css

CSS
1
2
3
4
5
6
7
8
9
10
#selectBackground ul  li  a{
    background: url('../images/select_bg_unactive.png') no-repeat;
    display: block;
    width: 16px;
    height: 16px;
}
 
#selectBackground ul  li  a.active{
    background: url('../images/select_bg_active.png') no-repeat;
}

пока к элементу сделан скрипт, который только меняет класс у активного пункта

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
    
    <script type="text/javascript">
        $(function() {
        
        <!-- Select background -->
        $("#selectBackground ul li a").click(function(e) {
            e.preventDefault();
            $("#selectBackground ul li a").removeClass('active');
            $(this).addClass('active');
        });
            
         });
    </script>

подскажите, как еще добавить к переключению изменение бэкграунда сайта в зависимости от выбранного пункта?

Добавлено через 8 часов 36 минут
В общем, пока сделано так
в списке ссылок к каждой ссылке добавлен свой id

HTML5
1
2
3
4
5
6
7
8
        <div id="selectBackground">
            <p>Select bg</p>
            <ul>
                <li><a href="javascript:void(0)" class="active" id="bg1"></a></li>
                <li><a href="javascript:void(0)" id="bg2"></a></li>
                <li><a href="javascript:void(0)" id="bg3"></a></li>
            </ul>
        </div>

а к диву, у которого нужно изменить бэкграунд, добавлен класс

HTML5
1
<div id="wrapper" class="background1"></div>

для каждого класса прописано стилевое свойство

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#wrapper {
    margin: 0 auto;
    width: 1024px;
    height: 1552px;
}
 
.background1 {
    background: url('../images/main1_background.png') no-repeat;
}
 
.background2 {
    /*background: red;*/
    background: url('../images/main2_background.png') no-repeat;
}
 
.background3 {
    /*background: yellow;*/
    background: url('../images/main3_background.png') no-repeat;
}

скрипт

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
    
    <script type="text/javascript">
        $(function() {
        
        <!-- Select background -->
        $("#selectBackground ul li a").click(function(e) {
            e.preventDefault();
            $("#selectBackground ul li a").removeClass('active');
            $(this).addClass('active');
            var clickId = this.id;
            var i = clickId.charAt(2)
            var str = "background" + i;
            $("#wrapper").attr("class", str);
            
        });
         
     });
    </script>

замечания всячески приветствуются

@aarkhipov · 24.11.2012, 14:38

Ну, во-первых, замените HTML-комментарий на JS-комментарий =)
Так -  - в JS-коде делать не следует.
Так - /* Select background */ - можно.

А вообще, ваш код можно немного упростить:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$(function() {
    var wrapper = $('#wrapper'),
        selectors = $("#selectBackground ul li a");
   
    selectors.each(function(index){
        $(this).click(function(){
            e.preventDefault()
            selectors.removeClass('active')
            $(this).addClass('active')            
            wrapper.attr('class', 'background' + index)
        })
    })
 });

Такой подход избавит нас от использования id. Единственное что, в CSS придется указывать классы backgroundN, начиная с нуля =)

@Heidel · 24.11.2012, 14:54 **[ТС]**

aarkhipov, объясните, пожалуйста, что делает ваш скрипт, я с этим только начинаю разбираться и еще не совсем понимаю

ну, то есть, в общем-то, понимаю, но лучше объясните ) как получается, что для каждого пункта меню задается свой index ?

@aarkhipov · 24.11.2012, 15:04

Ну, выражение "каждому пункту меню задается свой индекс", здесь немного некорректно, т.к. самим пунктам он не задается, а происходит вот что.
Я воспользовался методом .each ( http://api.jquery.com/jQuery.each/ ), который итерирует (перебирает) все элементы и вызывает переданную в качестве аргумента функцию для каждого элемента. А в саму функцию уже передается номер элемента (об этом заботится сам метод each). Далее, мы навешиваем на каждый элемент обработчик для клика, в котором производим основные действия, в том числе и назначение класса врапперу, используя index. Сам index сохраняется из-за замыкания (это очень часто используется в JS) - http://javascript.ru/basic/closure

Объясняльщик из меня неважный, если опять что непонятно - говорите =)

@Heidel · 26.11.2012, 17:45 **[ТС]**

aarkhipov, спасибо, всё, в общем-то, понятно

Добавлено через 19 часов 15 минут
Чтобы ожило, скрипт чуть-чуть пришлось подправить

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <script type="text/javascript">
        $(function() {
        
        /* Select background */
        var wrapper = $('#wrapper'),
        selectors = $("#selectBackground ul li a");
   
        selectors.each(function(index){
        $(this).click(function(e){
            e.preventDefault()
            selectors.removeClass('active')
            $(this).addClass('active')  
            var i = index + 1;
            wrapper.attr('class', 'background' + i)
            })
        });
         });
    </script>

добавить переменную е в строку $(this).click(function(e){e.preventDefault()
и добавить переменную

JavaScript
1
2
i var i = index + 1; 
wrapper.attr('class', 'background' + i)

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

подскажите, как можно внести index-1 в строку, где задается атрибут? чтобы можно было убрать переменную i.
у меня что-то не получается совместить здесь в строку и числа, чтобы получался нужный результат.

@aarkhipov · 26.11.2012, 17:55

Ну про индексы я упоминал в конце своего сообщения. =) Решить проблему можно так:

JavaScript
1
wrapper.attr('class', 'background' + (index + 1))

@Heidel · 26.11.2012, 18:05 **[ТС]**

aarkhipov, спасибо

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@Heidel 115 / 115 / 39 Регистрация: 11.10.2011 Сообщений: 649
	24.11.2012, 14:54 [ТС]
	aarkhipov, объясните, пожалуйста, что делает ваш скрипт, я с этим только начинаю разбираться и еще не совсем понимаю ну, то есть, в общем-то, понимаю, но лучше объясните ) как получается, что для каждого пункта меню задается свой index ? 0

@aarkhipov 23 / 23 / 4 Регистрация: 24.11.2012 Сообщений: 97
	24.11.2012, 15:04
	Ну, выражение "каждому пункту меню задается свой индекс", здесь немного некорректно, т.к. самим пунктам он не задается, а происходит вот что. Я воспользовался методом .each ( http://api.jquery.com/jQuery.each/ ), который итерирует (перебирает) все элементы и вызывает переданную в качестве аргумента функцию для каждого элемента. А в саму функцию уже передается номер элемента (об этом заботится сам метод each). Далее, мы навешиваем на каждый элемент обработчик для клика, в котором производим основные действия, в том числе и назначение класса врапперу, используя index. Сам index сохраняется из-за замыкания (это очень часто используется в JS) - http://javascript.ru/basic/closure Объясняльщик из меня неважный, если опять что непонятно - говорите =) 0

@Heidel 115 / 115 / 39 Регистрация: 11.10.2011 Сообщений: 649
	26.11.2012, 18:05 [ТС]
	aarkhipov, спасибо 0