-
+
diff --git a/res/index.js b/res/index.js
index dfea2a5..ec6b0d5 100644
--- a/res/index.js
+++ b/res/index.js
@@ -1,4 +1,14 @@
+let selected = 'button-home';
+
+const changeSelected = (buttonId) => {
+ console.log(buttonId);
+ A(`#${selected}`).removeClass('button-selected');
+ A(`#${buttonId}`).addClass('button-selected');
+ selected = buttonId;
+};
+
const onButtonClick = (buttonId) => {
+ changeSelected(buttonId);
switch (buttonId) {
case 'button-home': {
A('#content-container').load('/pages/home.html');
@@ -20,6 +30,10 @@ const onButtonClick = (buttonId) => {
A('#content-container').load('/pages/contact.html');
break;
}
+ default: {
+ console.error('Invalid button id');
+ return;
+ }
}
};
diff --git a/res/lib/A.js b/res/lib/A.js
index 02ea200..c3c6775 100644
--- a/res/lib/A.js
+++ b/res/lib/A.js
@@ -70,6 +70,23 @@ A._Collection.prototype.each = function (handler) {
});
};
+A._Collection.prototype.attr = function (attr, val) {
+ return this._forCollection((el, i) => {
+ el.setAttribute(attr, val);
+ });
+};
+
+A._Collection.prototype.addClass = function (classname) {
+ return this._forCollection((el, i) => {
+ el.classList.add(classname);
+ });
+};
+A._Collection.prototype.removeClass = function (classname) {
+ return this._forCollection((el, i) => {
+ el.classList.remove(classname);
+ });
+};
+
A._Collection.prototype.hide = function () {
return this._forCollection((el, _) => {
el.style.display = 'none';
diff --git a/res/style.css b/res/style.css
index b16d72d..5a00cea 100644
--- a/res/style.css
+++ b/res/style.css
@@ -42,14 +42,15 @@ body {
margin-bottom: 2px;
color: #606060;
cursor: pointer;
+ outline: none;
}
-.button-default:hover {
+.button-default:hover:not(.button-selected) {
color: #d1d1d1;
- background-color:#2E2E2E;
+ background-color:#555555;
}
-.button-default .selected {
+.button-selected {
color: #d1d1d1;
background-color:#2E2E2E;
}