Header navigation using jQuery

I'm encountering an issue with the final exercise in the jQuery course on Codecademy.

My goal is to replicate the navigation header as accurately as possible, but I'm struggling to figure out how to keep the selected div highlighted after it's been clicked.

Here's the functional jsFiddle.

And here is the original code:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <title></title>
    </head>
    <body>
        <div id="show" contenteditable="true">Enter your text below:</div>
        <div id="back"></div>
        <div class="header">Files</div>
        <div class="header">index.html</div>
        <div class="header">style.css</div>
        <div class="header">script.js</div>
    </body>
</html>

style.css:

#back {
    height: 50px;
    width: 400px;
    position: absolute;
}

#show {
    background-color: rgb( 35, 44, 49 );
    color: #FFFFFF;
    height: 400px;
    width: 400px;
    top: 58px;
    position: absolute;
}

.header {
    font-family: helvetica;
    float: left;
    background-color: #212121;
    color: rgb(105, 105, 105);
    position: relative;
    height: 50px;
    width: 100px;
    text-align: center;
}

script.js:

$(document).ready(function() {
    $("#show").hide();
    $(".header").click(function() {
        $(this).stop().animate( {
            color: "white",
            backgroundColor: "rgb( 35, 44, 49 )"
        });
        $("#show").show();
    });

    $(".header").mouseenter(function() {
        $(this).css("cursor", "pointer");
        $(this).stop().animate( {
            color: "white",
            backgroundColor: "rgb( 45, 60, 70 )"
        });
    });

    $(".header").mouseleave(function() {

            $(this).stop().animate( {
                color: "#696969",
                backgroundColor: "rgb( 33, 33, 33)"
            });
    });
});

Any assistance would be greatly appreciated.

Answer №1

Here is a simple and efficient solution for your current setup:

Just include the following CSS code:

.active { background-color: rgb( 35, 44, 49 ) !important; color: white !important; }

Next, add one line of code and a new method to your script:

$(".header").click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active').stop().animate( {

Answer №2

Have you considered something like this: JSFIDDLE

$(document).ready(function() {
    $("#show").hide();
    $(".header").click(function() {
        $('.header').removeClass('active');
        $(this).stop().animate( {
            color: "white",
            backgroundColor: "rgb( 35, 44, 49 )"
        });
        $(this).addClass('active');
        $("#show").show();
    });

    $(".header").mouseenter(function() {
        $(this).css("cursor", "pointer");
        $(this).stop().animate( {
            color: "white",
            backgroundColor: "rgb( 45, 60, 70 )"
        });
    });

    $(".header").mouseleave(function() {

            $(this).stop().animate( {
                color: "#696969",
                backgroundColor: "rgb( 33, 33, 33 )"
            });
    });
});

Answer №3

Follow these steps...

CHECK OUT THE DEMO

$(document).ready(function() {
$("#show").hide();
$(".header").click(function() {
    $('.header').removeClass('active');
    $(this).stop().animate( {
        color: "white",
        backgroundColor: "rgb( 35, 44, 49 )"
    });

    $(this).addClass('active');
    $("#show").show();
});

$(".header").mouseenter(function() {
    $(this).css("cursor", "pointer");
    $(this).stop().animate( {
        color: "white",
        backgroundColor: "rgb( 45, 60, 70 )"
    });
});

$(".header").mouseleave(function() {

        $(this).stop().animate( {
            color: "#696969",
            backgroundColor: "rgb( 33, 33, 33 )"
        });
     });
 });

Next, include an active class in your CSS...

.active {
color:white!important;
background:rgb( 45, 60, 70 )!important;
}

VIEW THE FIDDLE HERE

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

How can I set a background image to automatically adjust to the width of the window, be full height, allow for vertical scrolling, and

How can I set a full-screen background image that adjusts to the body width without horizontal scrolling, maintains height proportionate to width, and allows for vertical scrolling? Here is my current code: html, body { margin: 0px; padding: 0px; } bo ...

Trouble with z-index | initial div out of four malfunctioning

Currently, I am attempting to practice by replicating the design shown in this image: https://i.sstatic.net/iIA2q.jpg However, I have encountered an issue that has been persisting for some time: https://i.sstatic.net/grABz.png I'm struggling to un ...

Tips for making a standout testimonial card?

Apologies for the simplistic inquiry. As a fresh student of a full stack web developer bootcamp, I find myself grappling with this particular challenge. How can I go about creating a testimonial card similar to this one? I've attempted to write code ...

Determine the number of inputs within a div and increment each one by +1 using jQuery

I am currently working on developing a slider and have successfully completed most parts of it, except for the challenge of counting input fields using jQuery and assigning an incremented number to each of them upon action completion. On my slide, I have ...

Sending a specified data type as an argument to a hyperlink

Is there a better way to create a parameter URL containing the same text that is typed into this text box? I am currently trying to achieve this but it doesn't seem to be working. <!DOCTYPE html> <html> <head> <script src=" ...

My HTML files are not getting bundled by Webpack

Despite including dependencies for HTML loaders in my Angular 2 application, webpack is not bundling my HTML files along with the rest of the files it generates. I have tried using both "html-loader" and "html-webpack-plugin," but to no avail. My webpack ...

What is the best way to eliminate the background color from one span after selecting a different one?

I created a span element that changes its background color when clicked, but I want the background color to switch to the newly clicked span while removing it from the previously clicked one. Can someone help me achieve this? CSS list-sty ...

Button's focus event doesn't trigger on iPad

I am facing an issue with adding a bootstrap popover to my website. The popover should appear when the user clicks a button using the focus event. This functionality works fine on desktop browsers, but on the iPad, it seems like Safari on iOS does not trig ...

Retrieving the value of an inputtext component in PrimeFaces using jQuery

I have the following code snippet: <h:form id="calcForm"> <h:panelGrid columns="3" styleClass="panelGridNoBorder"> <p:inputText id="value" /> <p:commandButton value="calculate " onclick="calc()" /> </h:panelGrid> ...

Bring in the content to Notepad utilizing jQuery

How can I export data to Notepad? I have fields for Name, Age, and WorkingStatus that are input as text and textarea. Is there a demo or code available to help me insert this data into Notepad? ...

`Messing with jQuery data tables`

Could you please clarify the distinction between mDataProp and fnRender? In the first scenario, we simply declare the property as is, while in the second case we use: oObj.aData['prop2'] . I have a couple of inquiries regarding this. Is it ...

Deciphering the occurrence of jQuery-Mobile page firing events: the mystery behind dialog pages appearing upon closure

I'm still fairly new to jQuery-Mobile and I'm trying to wrap my head around what exactly happens when a page or dialog is loaded. To help illustrate the confusion I'm experiencing, I put together a small collection of files that showcase th ...

The issue with NGX-Bootstrap/Angular Pagination arises when attempting to adjust the maxSize input while the screen view (width) is being altered

Currently, I am utilizing the Pagination component from Valor Software (click here to access). I am interested in adjusting the maxSize input dynamically based on changes in screen width. For reference, please see this example: Click to view example. It ...

Tips for incorporating error messages based on specific errors in HTML

In the current setup, a common error message is displayed for all errors. However, I want to customize the error messages based on the specific type of error. For example, if the password is invalid, it should display "invalid password", and for an invalid ...

Having trouble displaying a local image in CSS using EJS

Hey there, I'm currently working with EJS. In my CSS file, I've added a background image but it's not showing up when the page loads. Strangely, if I use a hosted image, it works perfectly. Here is my directory structure: https://i.sstatic ...

After receiving a response from the .ajax function, the message will be added to the specified

After a successful AJAX request, the returned data will include a status parameter. If the status is false (indicating no AJAX failure), the data will contain an array of element names along with their corresponding error messages. The objective here is to ...

Troubleshooting problem with the responsive dropdown menu in Bootstrap for mobile

I'm in need of some assistance with the mobile menu on my website. Whenever the STORE menu is clicked on the mobile version, it doesn't expand as expected, instead, it closes the general menu. Here is the link to the webpage. Any help would be gr ...

What causes a modal dialog box to load with a single button click, even if there are multiple identical buttons present? How can this issue be resolved?

I have implemented a Datatables table within a view that contains buttons triggering a modal dialog. The buttons are only visible when a certain condition is met (specifically, when the image path is not null), and this conditional logic resides within the ...

Is jQuery failing to serialize the form data?

I have a question regarding my form. When I try to serialize it using a jQuery script, the output is empty. Could someone please assist me with this issue? Here is a snippet of my form: <form id="tabb2"> <!-- *************************** ...

The Card Component from Core UI fails to appear in the Print Preview feature

I'm currently experimenting with the Card Component from the Core UI framework. However, I'm facing an issue where the color of the Card component and its associated icon do not appear in the Preview when trying to print the page. I attempted to ...