Using Javascript, you can create a function that can disable or enable a text link based on

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

javascriptjqueryhtmlcssajax

Answer №1

You have the opportunity to simplify things significantly...

$('span').on('click', function() {
    $("#btnNext").toggleClass("myButton");
    $(this).toggle();
    $('span').not(this).toggle();
  });
  
  $("#btnNext").on('click', function(){
      if ($(this).hasClass('myButton')) {
window.location.href = 'http://www.example.com';
        } else {
          //Insert click on disabled function here, if any.
          }
});
body { margin: 40px; }

.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, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #84bbf3;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;font-weight:bold;padding:6px 24px;text-decoration:none;text-shadow:0px 1px 0px #528ecc;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
background-color:#378de5;
}
.myButton:active {
position:relative;top:1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="enableLink">Enable</span> 
<span class="disableLink">Disable</span>
<div id="btnNext" class="btnToPage">Go to page 2</div>

Simply assign the active class to toggle instead of using remove/addClass; this is what the toggle function is designed for.

I modified the click event to simply toggle the visibility of the spans. This eliminates the need to specify which span was clicked. jQuery automatically detects the clicked element and can apply actions to other similar unclicked elements.

Additionally, I adjusted the button click to target the ID rather than the class. It checks if the button is active and, if so, redirects to the specified URL.

Depending on other elements in the markup, exclusively targeting the generic span for the click event may or may not pose an issue. If required, you can give both spans the same class and then target the class instead of each individual span.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to determine the position of the currently chosen selection in relation to the top

Let's say we have a situation like this: <select id="my-select"> <option id="iun">Option 1</option> <option id="sdd">Option 2</option> <option id="ert" select="selected">Option 3</option> <option i ...

jqueryhtmlhtml-select

Exporting modules from Node.js using Express framework is a common

Encountering an issue with this error message Error: app.get is not a function This section shows my configuration in config/express.js var express = require('express'); module.exports = function(){ var app = express(); app.set(&apo ...

javascriptnode.jsexpress

Stable navigation bar implemented with a grid design

I'm struggling with creating Navbars in Grid Layout. https://codepen.io/Aeshtray/pen/BdqeZL For mobile view, I want the Navbar to be fixed horizontally (as currently coded), but once reaching a width of 500px, I need it to become vertically fixed on ...

csslayoutnavbarcss-grid

Guide to implementing a JQuery datepicker in a basic Rails application

Being a beginner in Ruby On Rails and web programming, I am transitioning from a traditional desktop programming background. While I have created a few simple rails applications before, this is my first attempt at using Rails3 and integrating jQuery. I am ...

jqueryruby-on-railsajaxdatepicker

Tips on updating arrow button icon when clicked using jquery

I am currently working on a project where I have a button icon that I want to change upon clicking it. I am using the following jQuery code: <script> $('div[id^="module-tab-"]').click(function(){ $(this).next('.hi').sl ...

javascriptjqueryhtmlcss

Generating step definitions files automatically in cucumber javascript - How is it done?

Is there a way to automatically create step definition files from feature files? I came across a solution for .Net - the plugin called specflow for Visual Studio (check out the "Generating Step Definitions" section here). Is there something similar avail ...

javascripttypescriptspecflowcucumberjs

Searching for li elements that contain text values - a guide

I have a list of letters and I want to filter out any values that contain the text entered by the user in a textbox. Here is the design: Search List: <input type="text" id="txtSearch" /> <ul> <li>Coffee1</li> <li>Coffe ...

javascriptjquerycss

Guidance on implementing turn.js in your Ionic 2 project

I used to have an Ionic v1 project with turn.js, but now I've upgraded to Ionic v2. However, I'm facing issues when trying to import turn.js along with jQuery. angular.module('albumController', []) .directive('flipbook', fun ...

jqueryangularionic2angular2-directivesturnjs

I am seeking assistance in transmitting data to my server utilizing Ajax, PHP, and mySQL without relying on a form

I have been researching tutorials on how to work with JavaScript without using forms. Currently, I have the JavaScript code that maps my answers based on clicks and generates an array shown in an alert. However, I am unsure if the Ajax request is sending i ...

javascriptphpjquerymysql

Retrieving Information from Ajax Call Using Python

I am struggling to figure out how to retrieve data from an Ajax request in my JavaScript code within a Python Flask application. The Ajax request I am working with does not involve jQuery. I have attempted using request.form.get() and request.get_json() i ...

javascriptpythonajaxflask

Modifying the overflow behavior within a Vuetify dialog

Is there a way to have a floating action button positioned on the top right of a dialog, slightly overflowing so it's offset from the dialog itself? I'm struggling to override the 'overflow-y: hidden' property set by v-dialog. <v-dia ...

cssvue.jsvuetify.js

Adjusting an element within an array obtained from a computed property

Within my Vuex store, I retrieve an array of rooms from a Firebase/Firestore API call. This array structure is as follows: [{label:'Kitchen', description:'...'}, ...]. To make this array accessible to my application, I utilize a Vuex ge ...

javascriptvue.jsvuejs2vuexcomputed-properties

Trigger modal following unsuccessful registration

I have a method in the controller for registering users. [HttpPost] public ActionResult Register(RegisterViewModel register) { if (this.IsCaptchaValid("Captcha is not valid")) { if (ModelState.IsValid) { ...

c#jqueryajaxasp.net-mvc

How can you position two elements at the bottom of a ul element with a lengthy height?

Looking for a way to position the last two li elements at the bottom of a large-height ul element while keeping the rest at the top. The implementation can be viewed here. Here is an example of the code: .my-ul { height: 90vh; width: 40%; backgr ...

htmlcss

Encountering an 'undefined' property error when clicking a button in Angular 1.x

Hey there, I have a question that might seem simple to some of you. I'm struggling with fixing an error and I don't quite understand why it's happening :( This error popped up while using Angular 1.x. What I need help with is creating an al ...

javascriptangularjs

Creating a secured page with Node.js and Express: Password Protection

I am a beginner with node.js/express! Currently, I am working on developing a chat site along with a chat admin site. When I navigate to _____:3000/admin, it prompts me for a password through a form. I am looking for a way to verify if the entered passwor ...

javascripthtmlnode.jsexpress

Send the user to the chosen option in the dropdown menu

My goal is to redirect the user based on the option they select. I am having an issue with my HTML code as it currently redirects to "example.com/page" instead of "example.com/page/1". Can someone please assist me in resolving this problem? <select clas ...

javascripthtmldropdown

An Overview of Node.js Application Structure

Guten Tag! My name is Alex, and I am from Germany. I apologize for any mistakes in my English as it is not my first language. I have recently started learning programming with Node.js after creating some simple static HTML and CSS websites. As a beginner, ...

htmlnode.jstwitter-bootstrapexpress

Tips on setting up a jQuery-Ajax-Request without immediately sending it to the server

When working with Mootools, I have the ability to create an AJAX request and store it in a variable for future use. This allows me to send the request at a later time by using: myRequest.send(); or myRequest.get(); However, in jQuery, any AJAX request ...

jqueryajaxmootools

Removing a row from a table in AngularJS connected to FireBase

I am currently facing an issue where the function fails to work when attempting to delete a row. My goal is to be able to remove a specific row from the table by clicking on the red button. Here is the link to my plunker code In index.html, I have includ ...

javascriptangularjsfirebase