Here is the code snippet showcasing CSS styles and HTML elements:
CSS:
.enableLink{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#069;
padding-right:20px;
text-decoration:underline;
cursor:pointer;
}
.disableLink{
display:none;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#069;
padding-right:20px;
text-decoration:underline;
cursor:default;
}
.btnToPage {
background-color:#ededed;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#7c7c7c;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
cursor:default;
}
.btnToPage:active {
position:relative;
cursor:pointer;
}
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79...
HTML:
<span class="enableLink">Enable</span>
<span class="disableLink">Disable</span>
<div id="btnNext" class="btnToPage">Go to page 2</div>
When implementing this code using JavaScript for better functionality, there are areas that need improvement. Below is the JavaScript part:
$(document).ready(function(){
// JS Enable
$(".enableLink").click(function(){
// Enable Button Go to page 2
$("#btnNext").removeClass("btnToPage").addClass("myButton");
$(".enableLink").hide();
$(".disableLink").show().css({"cursor":"pointer"});
});
// JS Disable
$(".disableLink").click(function(){
// Disable Button Go to page 2
$("#btnNext").removeClass("myButton").addClass("btnToPage");
$(".disableLink").hide();
$(".enableLink").show();
});
// Redirect to another page?
$(".myButton").click(function(){
window.open("page2.html", target="_self");
});
});
Two questions arise from here: how to implement an "if else" condition in the 'JS Enable' and 'JS Disable' sections, and how to create a correct redirect link once the 'myButton' class is active in the 'enableLink' section. The existing code does not navigate to the next page as intended, so any guidance on fixing the redirection would be greatly appreciated.
Check out the example in JSFiddle: https://jsfiddle.net/kw5nyx4f