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

@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, спасибо

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@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