Изменить цвет при выборе, нажав с помощью Javascript CSS

У меня есть календарь с датами и временными интервалами. После выбора даты придут временные интервалы. Оттуда вы можете выбрать время, щелкнув. Теперь я хочу изменить цвет выбранного элемента во временном интервале. Предположим, если вы нажмете на временной интервал 11 AM-12PM, тогда он должен получить красный цвет, а затем вы нажмете в следующий раз, то есть 12PM-1PM, так что 12PM-1Pm получит красный цвет и сын. Я попытался использовать фокус, он не работает. Поскольку я уже использую hover. По этой причине focus и hover не работают в одно и то же время. Может быть, мне нужно что-то использовать onclick. Я добавил код плункера ниже. Это CSS:Изменить цвет при выборе, нажав с помощью Javascript CSS

.frame { 
    width: 100%; 
    height: 400px; 

    margin-left: 0%; 
    border: 1px solid #777777; 
    overflow: auto; 
} 

.datepicker { 
    width: 100%; 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
} 

.datepicker li { 
    cursor: pointer; 
    border-bottom: 1px solid #ededed; 
    padding: 10px; 
} 
.datepicker li:hover { 
    background: #EEE; 
} 
.text-center { 
    text-align: center; 
} 

.border { 
    border: 1px solid red; 
}

Plunker link

источник

2015-10-28 cyberoy

Вы должны использовать javascript для обработки событий, например, щелчок – Chris

Можете ли вы добавить ключ с именем ** isSelected ** и установить его нажатием. Также добавьте условие для класса в класс 'class: {className: $ data.isSelected}'. Также убедитесь, что сброшен isSelected из всех временных интервалов, а затем установите текущий как true. – Rajesh

Вы можете настроить таргетинг на выбранный элемент через $index, а затем добавить к нему класс, используя директиву ng-class. В принципе, вам нужно:

Добавить выбранное время индексная переменная вашей сферы:
```
$scope.selectedTimeIndex = -1; 
```

Pass $index к selectTime и условно добавить selected класс:

<li ng-click="selectTime(time, $index)" ng-class="{selected: $index == selectedTimeIndex}" ng-repeat="time in timeValues">{{time}}</li>

Изменить selectedTimeIndex на selectTime звонок:

$scope.selectTime = function(time, index) { 
    $scope.selectedTimeIndex = index; 
    // The rest of your function. 
};

Добавить selected класс в .css:
```
.selected { 
    background: red; 
} 
```

Простой пример here.

источник

2015-10-28 07:28:18

Ну, мы получили ответ. Красиво сделано ~ (y) – Fiido93

Да, как сказал @ Крис, вы должны использовать JavaScript, потому что вы хотите, чтобы показать, что на мыши.

Я не знаком с AngularJs, но концептуально и можно добавить класс

.selected { 
    background-color: red; 
}

А затем добавить этот класс к выбранному элементу и удалить, что из пункта lastSelected.

источник

2015-10-28 07:18:30

Изменить цвет при выборе, нажав с помощью Javascript CSS

ответ

Смежные вопросы