Изменить идентификатор div одним нажатием кнопки?

Question

Сейчас я работаю над созданием веб-сайта, на котором можно показать несколько изображений на главной странице, которые можно циклически щелкнуть по кнопке. Почти как галерея, но больше ориентирована на предварительный просмотр страниц. Я пытаюсь понять, как изменить id/class div, когда нажимается кнопка.

Я рассмотрел еще несколько вопросов, но никто не показывает, что это происходит для 4 разных идентификаторов.

Я очень новичок в JavaScript, и я стараюсь выяснить это, чтобы наилучшим образом удовлетворить мою ситуацию.

Вот jsFiddle, который я сделал для своей страницы. Цель состоит в том, чтобы кнопки в верхней части изменили зеленый div #Filler на новый id/class при щелчке.

http://jsfiddle.net/xCGDT/1/

#Filler { 
margin: auto; 
max-height: 700px; 
width: 1400px; 
background-color: green; 
max-width: 1366px; 
height: 800px; 
z-index: 1; 
margin-top: -250px; 
overflow: inherit; 
background-image: url(nature5.jpg); 
animation: Filler 1s 1; 
-webkit-animation: Filler 1s 1; 
transition-timing-function: ease; 
-webkit-transition-timing-function: ease; 
opacity:1; } 

изменен

#Filler2 { 
margin: auto; 
max-height: 700px; 
width: 1400px; 
background-color: red; 
max-width: 1366px; 
height: 800px; 
z-index: 1; 
margin-top: -250px; 
overflow: inherit; 
animation: Filler 1s 1; 
-webkit-animation: Filler 1s 1; 
transition-timing-function: ease; 
-webkit-transition-timing-function: ease; 
opacity:1; 

} 

Как я сказал, что я новичок в этом, и это для класса WebDesign проекта.

Answer 1

Использование Javascript:

document.getElementById('Filler').id = 'Filler2'; 

Answer 2

Попробуйте

Включить JQuery библиотеку и сделать как

$(function() { 
    $('#Filler').click(function() { 
     $(this).attr('id', 'Filler2'); 
    }); 
}); 

Answer 3

Ниже будет изменить класс или идентификатор данного элемента (отвечая на ваш вопрос)

var element = document.getElementById("myElement"); 
element.setAttribute("class", "aNewClass"); 
element.setAttribute("id", "aNewID"); 

, но я бы не стал подходить к тому, что вы можете сказать о том, что у вас есть

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

вот пример http://jsfiddle.net/thisishardcoded/XRgbM/

Answer 4

Ответ: node.setAttribute.

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

Вы можете поместить этот код в свою скрипку, и он работает по запросу.

var links = document.getElementById('Nav').getElementsByTagName('A'); 
var filler = document.getElementById('Filler'); 
for(var i=0;i<links.length;i++) (function(j){ 
    links[j].addEventListener('click', function(e){ 
     filler.setAttribute('id', 'Filler'+(j?j:'')); 
    }); 
})(i); 

Также см. Примеры jQuery в других ответах, ваша жизнь будет намного проще.