Reputation: 756
I want to find a way to make the page do something opposite to an onclick event.
So basically the below code shows how when a button (li
) is clicked on it increases the padding, however i'm not sure of how to reset the clicked button when another button is clicked, something like an offClick which I know doesn't exist but I need a way to reset the padding back to how it originally was when another button (li
) is clicked on within the same un-ordered List (ul
), which is in this case <ul id="menubar">
Is there a simple way to do this?
p.s. please let me know if the question is not clear
<div class="container">
<ul id="menubar" align="center">
<li onmouseover="updateMenuItem(this)" onmouseout="revertMenuItem(this)" onclick="this.style.padding='20px'" >Page</li>
</ul>
</div>
Upvotes: 0
Views: 403
Reputation: 3624
function liClicked(clickedItem) {
var list = document.getElementById('menubar');
var listItems = list.getElementsByTagName('li');
// reset the padding for all items
for (var i = listItems.length - 1; i >= 0; i--) {
listItems[i].style.padding = '0px';
}
// set the padding for the item that was clicked
clickedItem.style.padding = '20px';
}
Upvotes: 1