Подсветка предметов при выборе

Question

Подсветка предметов при выборе

0

У меня есть список элементов (div), которые имеют одинаковый цвет фона (белый). Теперь я хочу сделать изменение цвета фона (до синего) после нажатия. Дело в том, что за один раз можно выделить только один.

Итак, скажем, вы div1, и он станет синим. Если вы div2, нужно сделать div1 повернуть белым, а затем div2 стать синим.

Тип метода выбора, нет?

Есть ли отдельный способ сделать это?

user2904042 13 дек. 2013, в 12:02

Источник

0

Вроде как метод: focus для входных данных.
user2904042 13 дек. 2013, в 10:36

Теги:

javascript

jquery

html

css

3 ответа

0

Для агностического решения библиотеки вы можете использовать что-то вроде этого:

<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>

Gareth James 13 дек. 2013, в 10:03

0

Попробуй это...

<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.

Free-Minded 13 дек. 2013, в 08:59

Ещё вопросы

Вроде как метод: focus для входных данных.

Milind Anantwar · Accepted Answer · 2013-12-13T08-11-00.000Z

Попробуй это:

Код 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;
}