Question

我有一组动态生成的div元素，如：

<div on-click="selected">one</div>
<div on-click="selected">two</div>
<div on-click="selected">three</div>
<div on-click="selected">four</div>
<div on-click="selected">five</div>
<div on-click="selected">six</div>
<div on-click="selected">seven</div>

我想更改单击它的div的背景颜色，并在单击另一个div时丢失它。

我可以使用tabindex来实现这一点，但我想保留它，直到我在另一个div上单击它或有意清除它，tabindex不提供。

如何使用javascript来解决问题？

Answer 1

<div class="radiodiv" onclick=selected(this)>one</div>
<div class="radiodiv" onclick=selected(this)>two</div>
<div class="radiodiv" onclick=selected(this)>three</div>
<div class="radiodiv" onclick=selected(this)>four</div>
<div class="radiodiv" onclick=selected(this)>five</div>
<div class="radiodiv" onclick=selected(this)>six</div>
<div class="radiodiv" onclick=selected(this)>seven</div>

<script>
var divItems = document.getElementsByClassName("radiodiv");

function selected(item) {
    this.clear();
    item.style.backgroundColor = 'red';
}

function clear() {
    for(var i=0; i < divItems.length; i++) {
        var item = divItems[i];
        item.style.backgroundColor = 'white';
    }
}
</script>

Answer 2

把你所有的＆＃39; divs＆＃39;到一个div这将是容器。然后，通过js，循环通过它们并将css设置为非选定的和不同的选择。

代码：

＆＃13;

function sel(id) {
    var divs=document.getElementById('container').getElementsByTagName('div');  //get all divs from div called container
    for(var i=0;i<divs.length; i++) {
        if(divs[i]!=id) {  //if not selected div set .items css
            divs[i].className='items';
        }
    }
    id.className='selitem';  //set different css for selected one
}

＆＃13;

/* css for non-selected div*/
.items
{
    display:block;
    width:200px;
    background-color:white;
    color:black;
    cursor:pointer;
    margin-bottom:5px;
}
.items:hover
{
    background-color:blue;
    color:white;
}
/* css for selected div*/
.selitem
{
    display:block;
    width:200px;
    background-color:red;
    color:yellow;
    cursor:pointer;
    margin-bottom:5px;
   
}

＆＃13;

<div id="container">
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
<div class="items" onclick="sel(this)">one</div>
</div>

＆＃13;

代码中有解释。

Answer 3

试试这个：

<div onclick="selected(this)">one</div>
<div onclick="selected(this)">two</div>
<div onclick="selected(this)">three</div>
<div onclick="selected(this)">four</div>
<div onclick="selected(this)">five</div>
<div onclick="selected(this)">six</div>
<div onclick="selected(this)">seven</div>

<script>
function selected(element)
{
    var divs=document.getElementsByTagName("div");
    divs.forEach(function(i)
    {
        i.style.backgroundColor="auto";
    });
    element.style.backgroundColor="red";
}
</script>

Answer 4

仅供参考，没有任何循环。

var xxx = null;

function sel(element){
if(xxx != null){
xxx.className = "default";
}
element.className = "selected";
xxx = element;
}

Answer 5

这样做的最佳方式是在JavaScript，onclick或其他方面称为函数。在此功能中，您可以创建自己的代码，尝试更改CSS属性，然后更改背景颜色。

我创建的一个例子：

wCompact hRegular

名称功能： onover但

属性： elemento ，您需要传递的是类或ID html。

点击

5 个答案: