Retaining hue when breadcrumb item is selected

Check out this working demo of breadcrumbs in action on JSFIDDLE

Below is the code snippet:

HTML

<div id="crumbs">
    <ul>
        <li><a href="#1">One</a></li>
        <li><a href="#2">Two</a></li>
    </ul>
</div>

CSS

#crumbs ul li {
    display: inline;
}

#crumbs ul li a {
    display: block;
    float: left;
    height: 50px;
    background: #3498db;
    text-align: center;
    padding: 30px 40px 0;
    position: relative;
    margin: 0 10px 0 0;
    font-size: 20px;
    text-decoration: none;
    color: #fff;
    padding: 30px 40px 0 80px;
}

#crumbs ul li a:after {
    content: "";
    border-top: 40px solid rgba(0,0,0,0);
    border-bottom: 40px solid rgba(0,0,0,0);
    border-left: 40px solid #3498DB;
    position: absolute;
    right: -40px;
    top: 0;
    z-index: 1;
}

#crumbs ul li a:before {
    content: "";
    border-top: 40px solid rgba(0,0,0,0);
    border-bottom: 40px solid rgba(0,0,0,0);
    border-left: 40px solid #fff;
    position: absolute;
    left: 0;
    top: 0;
}

#crumbs ul li a:hover {
    background: #fa5ba5;
}

#crumbs ul li a:hover:after {
    border-left-color: #fa5ba5;
}

The CSS currently changes color when hovered over, but I want to make it so that the color remains after clicking on a breadcrumb item. This will help users see which tab is active. I've tried using :active in CSS, but it doesn't preserve the color after click.

Any suggestions?

Answer №1

To achieve this effect, you need to utilize the :visited selector. Here is an example of CSS code that will work effectively:

#crumbs ul li a:visited {
  background-color: #fa5ba5;
}

#crumbs ul li a:visited:after {
    border-left-color: #fa5ba5;
}

For a live demonstration, refer to this JS Fiddle link: Demo

UPDATE (Using full JS method):

You can access the complete JS demo in this JSFiddle link. Within the onclick event, there is a loop that removes the .onclick class from the previously active link.

The provided code should be optimized for improved functionality; it's only meant as a demonstration of its potential.

I advise utilizing a library like jQuery, as native DOM manipulation with JS can be tedious.

To illustrate the difference, with jQuery you would execute the following steps:

HTML Code :

<div id="crumbs">
    <ul>
        <li><a class="link" href="#1">One</a></li>
        <li><a class="link" href="#2">Two</a></li>
    </ul>
</div>

JS Code :

$('.link').on('click', function() {   
    $('.onclick').removeClass('onclick'); // Remove class from previous active link
    $(this).addClass('onclick'); // Add class to new active link 
});

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

In AngularJs, I am unable to prevent my ui-sref anchor tag from being triggered using event.preventDefault()

Here is the code snippet I am working with: <a ui-sref="MyModule">My Module</a> When the link is clicked, the following function will be triggered: $scope.$on("$locationChangeStart", function (event) { if (!confirm('You have un ...

Generate a custom link for an AJAX search bar 3

I need help creating a shortcut to a page with a preset search value. Take for example this page: On this page, there's a live (ajax) search field in the center that limits results when you type "1.8" to 8. Is it possible to create a direct link to t ...

Analyzing CSS transform values for rotate3d utilizing regular expressions

I want to split css transform values into an array, while keeping rotate values grouped together. For instance: 'translate3d(20px, 5px, 10px) rotateX(20deg) rotateY(10deg) rotateZ(0deg) skew3d(20deg, 10deg) rotateX(-20deg) rotateY(100deg) rotateZ(-3 ...

JQuery not properly validating inputs with required attributes after creation

I am currently developing a contact form that includes an "alternative address" <div id='alt'> with toggleable visibility. Inside this div, there is a required <input> field. I encountered an issue where toggling #alt twice (thus hidi ...

JavaScript CheckBox Color Change Not Functioning

Hello, I am currently experimenting with the checkAll function. When I click on the checkAll checkbox, it should select all rows and change their background color accordingly. Below is the JavaScript code I am using: function checkAll(objRef) { v ...

unable to display images from a folder using v-for in Vue.js

Just getting started with Vuejs and I have two pictures stored on my website. The v-for loop is correctly populating the information inside databaseListItem. The path is /opt/lampp/htdocs/products_db/stored_images/cms.png https://i.stack.imgur.com/969U7.p ...

Create a new file using PHP by submitting a form in HTML

Currently, I am developing a PHP script that is designed to modify a specific file for the user. This script retrieves the contents of the file and places them in a textarea within a form. How can I ensure that any changes made in this textarea are saved b ...

Spacing issue with Angular Material causing layout problems

I've been attempting to implement 'space between center' in a row, but it doesn't seem to be working as intended: <div layout="row" layout-sm="column" layout-align="space-between center" hide-xs> <div layout="colum ...

Positioning information below every row within a table

I need to display custom data below each row in a table. This is what I have tried: <table class="table" id="foo"> <tr> <th> Name </th> <th> Detail </th> ...

Sending PHP URL parameters results in a 404 error page

I'm facing an issue with an image that is meant to redirect to another page when clicked, along with sending two variables - s and n. echo "<a href='../?change-preference&s=up&n=".$element."'> <img src='..med ...

Shifting a div element around the webpage and letting it fall into place if it intersects with another div using plain JavaScript

Check out this jsFiddle link. Upon opening it, you will encounter a moveable div. However, I am looking to enhance this functionality by allowing the div to disappear if moved to the 'trash' area. Essentially, when you place the moveable div in t ...

The offset value was inconsistent in the desktop version of Firefox

Could you take a look at my code on the fiddle link, Here is the code snippet: <body> <div id="content" style="width:400px; height:110px;"> <svg id="circle" height="300" width="300"> <circle cx="150" cy="150" r="40" st ...

Eliminating projectiles from disorganized list

Query If you are interested in accessing the html and css for the current website I am developing, you can locate it at /Query I am currently facing an issue with removing the bullets displayed in the top horizontal menu (Home...Contact). Despite follow ...

Hover effect alters background color

I've successfully created a box around text, but now I want it to change color when hovered over. However, I'm facing difficulty in achieving this effect. An image has also been attached for reference. Please review the image and locate the socia ...

Adjust the color of the output result in real-time

Having trouble changing the color of a JavaScript result based on whether it's positive or negative. I've tried several solutions but can't seem to find one that works. Here is my latest attempt: JavaScript: var calc = (a + b) * c; doc ...

Is it possible to integrate this ReactJs project into my Electron-based web application?

Currently, I am a novice in JavaScript and am working on developing a web application for my school project using Electron.js. At the moment, my project consists of JS, CSS, and HTML code only. You can view the homepage of my program on Codepen. [Codepen] ...

"The save button in the MVC application is unresponsive and fails to perform any functions when clicked

I am experiencing an issue with appending an item to the SQL table. The Save button does not trigger any action when clicked, while the reset button functions properly. Additionally, no data is being displayed in the database after attempting to save. I am ...

What is the best way to align the items in my navigation bar to the center?

I'm having trouble getting my navbar buttons to appear in the center of the navigation bar. No matter what I try, they only seem to align to the left or right. Can anyone help me figure out how to center them? Here's the CSS code I'm working ...

Issue with virtual keypad on Android tablet causing overlap with textarea element on website

I'm currently developing a web page specifically for Android tablet devices and iPads. Everything seems to be working perfectly fine on the iPad, however, I am having some difficulties with the Android tablets. The issue lies with a textarea element ...

How to find the parent index of an array using AngularJS?

I am working with an array of student objects within my AngularJS controller. These data are displayed in a table in the view using ng-repeat. My goal is to have an alert show the parent index of a specific object when a button is clicked. For example, cli ...