Hi all. I am having an issue with highlighting a link. I am writing an angular/ionic app. I create a list by iterating over a set of data. We’ll call this the Settings List. Each list item is set as a button. When I click on an item in the settings list, it opens a table to the side of the settings list. The table contains its own list of times. We’ll call this the Settings Detail list. Next to each item in the Settings Detail list is an Edit button and a Delete button. If you click on the Edit button the buttons change to a Save button and a Cancel button (the “edit cancel” button), and the item whose button you clicked becomes editable. Above the table is an Add button and another Cancel button (the “table cancel” button). The Add button allows you to add an item to the Settings Detail list, and the table cancel button makes the table disappear.
Right now i have a class “hovering” attached to each of the buttons in the Settings List. I have .hovering button: focus and .hovering button: active set to the color blue. When I click on an item in the settings list, it turns blue and opens up the table. However, if I click on anything else, whether it’s another item in the Settings List or the Add, Table Cancel, Edit or Delete buttons, the highlighting turns off and the Settings List item that was blue is no longer blue.
What I would like to happen is that if I click on a Settings List item and then click on another Settings List item, the first Settings List item will lose its highlighting. Similarly, if I click on the Table Cancel button at any point to close the table, the Settings List item will lose its highlighting. However, if I click on the Add, Edit or Delete buttons, I want the Settings List item to remain highlighted. Similarly, if I do any editing of a Settings Detail List item and/or click the Save or Edit Cancel buttons, I want the Settings list to remain highlighted.
Can anyone help? Let me know if I need to post some code. Thanks!