5

现在我正在努力创建一个可以在主页上展示多个图像的网站，可以通过单击一个按钮来循环。几乎就像一个画廊，但更适合页面预览。我想弄清楚的是如何在单击按钮时更改 div 的 id/class。

我查看了其他一些问题，但没有一个问题表明 4 个不同的 ID 会发生这种情况。

我对 JavaScript 非常陌生，并且正在尝试找出最适合我的情况。

这是我为我的页面制作的 jsFiddle。目标是让顶部的按钮在#Filler点击时将绿色 div 更改为新的 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;

}

就像我说的那样，我对此很陌生，这是一个网页设计类项目。

4

4 回答 4

6

尝试

包括 jquery 库并作为

$(function() {
    $('#Filler').click(function() {
        $(this).attr('id', 'Filler2');
    });
});
于 2013-05-07T01:58:29.633 回答
6

使用 Javascript：

document.getElementById('Filler').id = 'Filler2';
于 2013-05-07T01:56:02.453 回答
3

以下将更改给定元素的类或 ID（回答您的问题）

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

但我不会按照你的小提琴建议的方式处理事情

我会用 # 元素选择器定义共享 CSS，然后在 . 类选择器并仅换出类

这是一个例子 http://jsfiddle.net/thisishardcoded/XRgbM/

于 2013-05-07T02:17:47.123 回答
2

答案是：node.setAttribute。

一个重要的建议：不要在 HTML 中使用重复的 ID。ID 应该标识单个节点。如果您需要多个具有相同标识符的项目，请改用类。

您可以将此代码放在您的小提琴中，它可以按要求工作。

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 示例，您的生活会轻松很多。

于 2013-05-07T02:50:18.510 回答