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

[netcat-na-diary]

Переключатель бэкграундов


HTML-код

        <div id="selectBackground">
            <p>Select bg</p>
            <ul>
                <li><a href="javasсript:void(0)" class="active" id="bg1"></a></li>
                <li><a href="javasсript:void(0)" id="bg2"></a></li>
                <li><a href="javasсript:void(0)" id="bg3"></a></li>
            </ul>
        </div>

К каждой ссылке добавлен свой id

Див, у которого нужно менять бэкграунд

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

К нему добавлен class="background1", для каждого класса прописано стилевое свойство

#wrapper {
    margin: 0 auto;
    width: 1024
    height: 1552
}
 
.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;
}

Библиотека + скрипт

    <sсript type="text/javasсript" src="sсriрt/jquery-1.8.2.min.js"></sсriрt>
    
    <sсript type="text/javasсript">
        $(function() {
        
        
        $("#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);
            
        });
         
     });
    </sсriрt>

Рабочий вариант скрипта, предложенный на киберфоруме.

$(function() {
    var wrapper = $('#wrapper'),
        selectors = $("#selectBackground ul li a");
   
    selectors.each(function(index){
        $(this).click(function(e){
            e.preventDefault()
            selectors.removeClass('active')
            $(this).addClass('active')            
            wrapper.attr('class', 'background' + (index+1))
        })
    })
 });

Ссылка на топик http://www.cyberforum.ru/javasсript-jquery/thread707150.html

ИСПРАВЛЕННЫЙ (рабочий) ВАРИАНТ СКРИПТА

	<sсript type="text/javasсript">
		$(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)
			})
		});

         });
 	</sсriрt>