Так и было задумано изначально. Там получается комната, у которой меняются цвета стен, так вот будет еще выбираться и материал стен, в таком случае у меня будут дивы с картинками sm... и sp..., а цвета у них одинаковые, вот поэтому мудрю, буду писать условие сейчас, что если выбран такой-то материал, то добавляем sm, если такой-то, то добавляем sp. Ну как-то так :dance:

Обращение же будет к разным объектам, а цвет и материал выбираются тоже разными ссылками, какие проблемы тогда использовать сразу ID?

Вот в том то и дело, что цвет будет выбираться одними и теми же ссылками, а обращение к разным объектам

Я разве против? Но далее речь то была о материале. А словами можно - что нужно "сотворить"?

А сотворить нужно грубо говоря планировщик интерьера. У него можно оформить:
1. стены: имеют 3 возможных материала панелей, и в зависимости от выбора радиокнопок панелей, меняются картинки с панелями, на которые скрыты (display:none), а при нажатии на кнопочки с цветами (display:block);
2. полы: имеют 2 возможных варианта - линолеум и наливные, у которых так же разный набор цветов и соответствующих картинок.
А потом еще добавится потолок и оборудование.

Учитывая мое первое знакомство с javascript, то я уже голову всю сломала.
Со стенами у меня все заработало, а добавив пол, все перестало работать :(
Вот.
Можете подскажете, что не так делаю:

<script type="text/javascript">
	    var btn = document.querySelectorAll('.btn'),
		el = document.querySelectorAll('.el');
		   Array.prototype.forEach.call(btn, function(curr){
			   
			   curr.addEventListener('click', function(event) {
				   Array.prototype.forEach.call(el, function(curr){
				   curr.classList.remove('active');
				});	
				   if (document.getElementsByName('gender').checked = true) {
					  if(document.getElementById('sm').checked) {   		
	     	 	      document.querySelector('#sm'+this.getAttribute('href').slice(1)).classList.add('active');				  
					  } 
					  if ((document.getElementById('sp').checked) || (document.getElementById('spr').checked))  {
					  document.querySelector('#sp'+this.getAttribute('href').slice(1)).classList.add('active');
					  } 
					  };
					if (document.getElementsByName('gender2').checked = true) {
					  if (document.getElementById('linol').checked)  {
					  document.querySelector('#p'+this.getAttribute('href').slice(1)).classList.add('active');
					  }};					  
                	  return false;  
				}, false);    
			}); 
</script>

Добавились input radio с другим name (gender2) - это выбор пола. Так вот, первая часть со стенами работает, а с полом нет. Знаю, что вы сейчас надо мной будете смеяться ;) но все, я не могу никак и так и сяк пробовала.
А пример можно посмотреть на этой странице http://www.laminar.ru/test/

А точнее говоря все материалы хранит сервер. Исходя из того, что материал может иметь текстуры, которые в свою очередь могут иметь различные цвета, подобные данные хранят в связанных таблицах базы. Например, основная таблица - это хранение имеющихся материалов, панели: пластиковые, деревянные и т.п.. Вторая таблица будет содержать все имеющиеся наборы этих материалов по разным характеристикам, как то текстура, цвет и пр., которые в свою очередь хранятся в таблицах характеристик.

Пользователю никогда не вываливается все кучей, а выдается только тот набор, который он запрашивает, например выбрал он панели пластиковые, затем можно выбрать какие есть среди них текстуры, а только потом среди них выбрать по цвету и т.д.. И это делается посредством Ajax.

Чем больше вы будете вываливать на клиента и мудрить с различными подстановками, тем сложнее будет самой разобраться в длинном коде.

Извини пожалуйста, за возможно глупые вопросы. А это можно сделать через запросы к базе mysql, в которой создать как раз эти таблицы, и php?

Ну почему глупый, это как раз и делается так - клиент отправляет асинхронный запрос на сервер, выбор пользователя -> сервер по этому выбору как параметрам делает запрос в базу и возвращает результат запроса клиенту -> клиент по данным ответа сервера добавляет на страницу список, в котором можно выбрать следующие параметры и т.д., пока не будет достигнут последний выбор и определяющий картинку.

Глупый, потому что логику понимаю, а делать не очень представляю как :-E
ну ничего, буду учиться

начала пробовать, вот сразу проблема)))
как удалить именно div блок при клике на ссылку

$( 'ссылка с id #steny' ).click(function () {
// При клике на steny "стены" мы должны удалить 
// все имеющиеся значения в все допустимые значения div c id #p, #pt, #ob

$( '#p, #pt, #ob' ).find( 'div:not(:first)' ) // Ищем все теги, не являющиеся тегом по умолчанию
.remove() // Удаляем эти теги
// Изменим значение свойства disabled объектов,
// так как мы работаем с ними через библиотеку jQuery
.end() // Возвращаемся к исходному объекту
.prop( 'disabled',true ); // Делаем неактивными
// Сохраним выбранное значение списка в переменную
var type_id = $( this ).val();
// Если выбрано значение по умолчанию, ничего не делаем
if (type_id == 0) { return; }
....

Не правильно же, disabled используется только в полях списков?