I'm facing an issue with my asp.net Master page. I have a menu bar with 4 buttons, and I want to change the color when a button is clicked. I was able to achieve this using java script, but the problem arises when I redirect to a child page, as the color changes back to its initial state.
Here is the ASP.NET CODE (each button has different colors for class and focus):
<div>
<input type="button" id="t1" class="button" onclick="setColor('tab1', 0)" value="b 1">
<input type="button" id="t2" class="button" onclick="setColor('tab2', 1)" value="b 2">
<input type="button" id="t3" class="button" onclick="setColor('tab3', 2)" value="b 3">
</div>
Below is the java script code:
function setColor(pos) {
var buttons = Array.prototype.slice.call(document.querySelectorAll(".button"));
buttons.forEach(function (btn) {
btn.addEventListener("click", function () {
if (this.value == "button 1") {
window.location.href = "Default.aspx";
} else if (this.value == "button 2") {
window.location.href = "Default2.aspx";
} else if (this.value == "button 3") {
window.location.href = "Default3.aspx";
}
buttons.forEach(function (btn) { btn.classList.remove("focus"); });
this.classList.add("focus");
});
});
}