Question

我有一个元素列表（div），它们都具有相同的背景颜色（白色）。现在，我想在单击后将背景颜色更改为蓝色。事情就是这样，一次只能突出显示一个。

所以，假设您单击div1，它会变为蓝色。如果您点击div2，则需要将div1变为白色，然后div2变为蓝色。

选择方法的排序，没有？

有没有独立的方法来做到这一点？

Answer 1

试试这个：

Jquery代码：

$('div').bind('click',function(){
$('div').removeClass('selected');//remove selected class from previously added div
$(this).addClass('selected');//add class to current div
})

<强> CSS：

.selected{
background-color:blue;
}

Answer 2

试试这个......

<style type="text/css"><!--
   #menu_top {
  list-style:none;
  width:100%;
  float:left; 
  margin:8px 0;
  border-bottom:8px solid #60CBFF;
  font:normal 11px/22px arial,helvetica,sans-serif;
    }

    #menu_top li, #menu_top a {
    float:left;
    height:22px;
    }

    #menu_top li {
     margin-left:4px;
    }


    #menu_top a {
       background: none repeat scroll 0 0 white;
       color: #000000;
       padding: 0 8px;
       position: relative;
       text-decoration: none;
    }

    #menu_top a:active,
     #menu_top a:focus,
      #menu_top a:hover {
        background: none repeat scroll 0 0 blue;
     }


 </style>

和HTML代码是..

<ul id="menu_top">
  <li><a href="#">HOME</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Career</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

您也可以查看我的JSFIDDLE。

Answer 3

对于库无关的解决方案，您可以使用以下内容：

<style>
    .clickable {
        background-color: #eee;
        height: 30px;
        margin: 10px;
    }
</style>

<div>
    <div class="clickable"></div>
    <div class="clickable"></div>
    <div class="clickable"></div>
</div>

<script>
    var clickables = document.getElementsByClassName('clickable');

    var resetSiblings = function () {
        for (var i = clickables.length - 1; i >= 0 ; i--)
            clickables[i].style.backgroundColor = '#eee';
    };

    var clickHandler = function (ev) {
        resetSiblings();
        ev.target.style.backgroundColor = '#00f'
    };

    for (var i = clickables.length - 1; i >= 0 ; i--)
        clickables[i].addEventListener("click", clickHandler, false);
</script>

选中时突出显示项目

3 个答案: