I'm having an issue with the code below that is supposed to keep the selected link highlighted, but it only flashes the green color on click. Can someone help me figure out what's going wrong here?
#sidebarContent a:active{
background-color: green;
}<div id="sidebarContent">
<ul>
<li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li>
<li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li>
</ul>
</div>To change the color, you need to set foucs since there is no link on href.
#sidebarContent a:active , #sidebarContent a:focus{
background-color: green;
}<div id="sidebarContent">
<ul>
<li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li>
<li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li>
</ul>
</div>Utilize the :hover pseudo-class to add highlighting effect:
#sidebarContent a:hover{
background-color: green;
}<div id="sidebarContent">
<ul>
<li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li>
<li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li>
</ul>
</div>#sidebarContent a:focus{
background-color: blue;
}<div id="mainSidebar">
<ul>
<li style="margin-bottom:15px"><a style="outline:none" href="#">Create</a></li>
<li style="margin-bottom:15px"><a style="outline:none" href="#">Profiles</a></li>
</ul>
</div>Make sure to adjust your css. For example:
<style>
/* unvisited link */
a:link {
background-color: red;
}
/* visited link */
a:visited {
background-color: green;
}
/* mouse over link */
a:hover {
background-color: hotpink;
}
/* selected link */
a:active {
background-color: blue;
}
</style>
I have developed an Angular app with a table-of-contents component that only displays two items. The code for the script is as follows: ts import { Component, OnInit } from '@angular/core'; import { pdfDefaultOptions } from 'ngx-extended-p ...
In my component, I have a loop that goes through an array of different areas with unique IDs. When you click the button, it triggers a dialog containing an iframe. This iframe listens for an event and retrieves data as JSON, then sends it via POST to an IN ...
Recently, I came across Chrome extensions and have been intrigued by their functionality. One question that has been on my mind is: how can I programmatically trigger a button click when the extension runs? For instance, there is a button with the id &apos ...
I am working with a checkbox element in my form. Here is the code: <input type="checkbox" value="yes" id="checkBox"> This checkbox is part of my form, and I am sending the form data to a PHP file using Ajax: var check = $('#checkBox').v ...
I'm encountering an issue while attempting to upload a file asynchronously from ajax to my controller. I am passing 3 variables - PictureId, PictureName, and PictureFile. The problem specifically lies with the "PictureFile" variable as it consistently ...
I am trying to add data to my database only if it doesn't already exist. While attempting this, I encountered an error message: { [Error: Cannot enqueue Query after invoking quit.] code: 'PROTOCOL_ENQUEUE_AFTER_QUIT', fatal: false } My ...
When running the code provided below, I encounter a 500 error for certain URLs in my list due to the structure of the page. The error occurs specifically on the line .map((htmlOnePage, index) => when some URLs lead to invalid pages, causing the prog ...
My development environment includes PHP 5.3.5, MySQL Server 5.5.8, and jquery version 1.6. I'm using Ajax to automatically populate a dropdown list of countries, but I keep encountering an error that persists despite trying various solutions. For exa ...
I need to search for a link that contains the word 'gathered'. Although I understand how to do it logically, I am having trouble writing the jQuery syntax for the selector: if (index === 3) { var $link = $('#rest').find('.tr ...
Exploring the world of dropdown menus in CSS has led me to encounter some challenges. I am striving to ensure that the dropdown boxes appear on the same line as the button that triggers them. Below is the CSS code I have been working with: /* global style ...
Is there a way to change the height of the tabView's header specifically in primefaces? Take for instance the tabs with headers like "God Father I", "God Father II" on this link, I only want to adjust the height of the header and not the entire tab. ...
I have put together a small Jquery script after much contemplation (since I am new to this), and unfortunately, it is not working as expected! Here's the issue: in my code, I want to click on an element defined by the variable trigger, and when clicke ...
In the code below, I have noticed that when an alert() box is used and then clicked, the content loads on the page. However, without the alert() box, the content does not load. I've tried researching 'Ajax' requests extensively but still can ...
Is there a way to make every div in a web application scroll like a marquee? Perhaps by using a specific CSS class or other method? The application is built with Angular 4 and Bootstrap. ...
My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...
In my controller (NodeJS/Express), I have 10 routes that all use the same variables 'startDate' and 'endDate'. Is there a way to declare these globally so they don't need to be repeated in each route? Currently, my code checks if ...
Hi there, I'm trying to figure out how to align the content of this card in a single row instead of stacked on top of each other. Here's the code snippet: <div class="container"> <form onSubmit={submitHandler}> ...
I was working on a node.js api project that functioned perfectly with node.js v8.1.4 & npm v5.0.3. However, upon transitioning to node.js v10.0.0 & npm v5.6.0, I encountered the following error: [email protected] ecosystem E:\opensource& ...
I desire the ability to create an instance of a model using a constructor while also providing injected services to that model. To clarify, I envision something like this: var book = new Book({ id: 5 }); // creates instance, sets id = 5 book.makeHttpCa ...
Currently, I am in the process of creating TypeScript typings for a JavaScript library. One specific requirement is to define an optional callable decorator: @model class User {} @model() class User {} @model('User') class User {} I attempted ...