Effect of Active or Focus on the HTML <ul> element

Check out this example of a UL tag:

<ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;">
    <li>I am waiting </li>
    <li>I am waiting </li>
    <li>I am waiting </li>
    <li>I am waiting </li>
    <li>I am waiting </li>

Is there a way with CSS or JavaScript to change the border color of this UL when it is clicked or active? And once I click elsewhere, the effect disappears. I've tried experimenting and searching, but haven't found a satisfactory solution.

Here's a JS Fiddle demo for reference: http://jsfiddle.net/saifrahu28/YFF6P/

If a jQuery solution works better, that's fine too.

javascripthtmlcss

Answer №1

To create outlines on each list item, you can add a tabindex attribute to each li element. This will make them act like inputs in focus:

<ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;">
    <li tabindex="1">I am waiting</li>
    <li tabindex="1">I am waiting</li>
    <li tabindex="1">I am waiting</li>
    <li tabindex="1">I am waiting</li>
    <li tabindex="1">I am waiting</li>
</ul>

For a live example, visit: http://jsfiddle.net/YFF6P/2/

To customize the appearance of the outline using CSS, you can use the outline property. Here is an example with a black outline:

Example with outline: http://jsfiddle.net/YFF6P/4/

li:focus {
    outline: solid 1px black;
}

Answer №2

Expanding on the previous response from FAngels...

Avoid hard coding the list style to prevent the need for using !important in the CSS. Instead, adjust the tabindex of the UL element and apply a specific class to it. This way, when it receives focus, it will switch to the ul:focus item.

HTML

<ul tabindex="1" class="thisList">
    <li>I am waiting</li>
    <li>I am waiting</li>
    <li>I am waiting</li>
    <li>I am waiting</li>
    <li>I am waiting</li>

</ul>

CSS

ul:focus {
    outline: solid 1px green;
}

.thisList { 
    list-style-type: none; 
    padding: 5px; 
    border: solid 1px #666666; 
}

Link to demonstration

Answer №3

li:hover, .test li:focus{border: 1px solid red;}

Is there a specific reason for avoiding the jQuery addClass() method?

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 to Utilize Raw HTML in GWT with the Power of Jquery/Javascript?

Below is the HTML code snippet: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function( ...

javajavascriptjqueryhtml

Error encountered in my application due to Node.js (Error [ERR_HTTP_HEADERS_SENT]: Unable to change headers once they have been sent to the client)

Experiencing an error message in my application when typing nodeJS. Please assist. , Encountering an error after sending the first POST request while running the app. const express = require('express') const Workout = require("../models/work ...

javascriptnode.jsreactjsexpress

When using iOS, inserting an iFrame with a source URL (SRC) on a webpage will automatically open the URL

Currently facing a peculiar issue within a Cordova app, specifically on iOS. The scenario is: I have an HTML page with existing content. At a later stage, I fetch additional HTML from a remote source and inject it into the original HTML page. However, whe ...

javascripthtmlioscordovaiframe

An error has occurred in nodejs: headers cannot be set after they have already been sent

I'm a newcomer to Node.js and encountering some challenges. Whenever I attempt to open 127.0.0.1:3000/bejelentkezes, I encounter the following error: POST /bejelentkezes 500 550.784 ms - 2259 GET /css/404.css 304 2.751 ms - - 1 Successful login Erro ...

javascriptnode.jsexpress

"Ensuring that every" within handlebars js

I have been exploring handlebars.js (hbs) and although I haven't mastered it yet, I am curious to know if there is an equivalent to the following code: {{#if all source}} If not, how can I create a similar functionality using handlebars.js? ...

javascriptnode.jsexpresshandlebars.js

The outcome of a function within the $.ajax method is transformed into a string

Trying to pass an array of IDs using the $.ajax data variable is proving to be a challenge. The array is generated by a function, and I've noticed that if I define this function outside of the $.ajax call, it works fine. However, when I place the same ...

javascriptjqueryajaxarrays

Error: Authentication error. fatal: Unable to access the remote repository." encountered while executing the command "yarn install

Today, while developing a web application, I encountered an issue with the "yarn install" command. Upon running "yarn install", the console displayed an error message: "Host key verification failed. fatal: Could not read from remote repository." I attemp ...

javascriptreactjsgithubnpmyarnpkg

Saving Data in an Angular Material Table: A How-to Guide

I have a basic angular material table and I am looking for a way to save the data displayed in each row when a button is clicked. Is it possible to save each row of data as an object and push it to an array? If so, how can I achieve this? <div class=& ...

javascripthtmlangulartypescriptangular-material

A dynamic AJAX menu showcasing content in a dropdown format, away from the conventional table layout

My dropdown select menu is correctly populating with data, but the output always appears outside of the table. Can anyone spot the issue in my code? Any suggestions or ideas are greatly appreciated! Thanks in advance, select.php <?php $q = $_GET[&apos ...

javascriptphpjqueryajax

Using the CSS selector :contains() does not function properly when there are line breaks present

<div>A very lengthy text that goes on and on</div> When rendered, A very lengthy text that goes on and on will appear as HTML removes the line breaks. However, locating the div using the :contains() CSS selector is challenging due to the lin ...

jqueryhtmlcssjquery-selectors

The watermark feature in HTML may not appear when printed on every page

I'm facing an issue with adding a watermark style. The watermark displays only on the first page when attempting to print in Chrome. It works perfectly in Firefox and IE. <style type="text/css"> #watermark { color: #d0d0d0; font-size: 90pt; ...

javascripthtmlcss

Submitting information to an HTML page for processing with a JavaScript function

I am currently working on an HTML page that includes a method operating at set intervals. window.setInterval(updateMake, 2000); function updateMake() { console.log(a); console.log(b); } The variables a and b are global variables on the HTML page. ...

javascriptjqueryhtml

Acquire key for object generated post push operation (using Angular with Firebase)

I'm running into some difficulties grasping the ins and outs of utilizing Firebase. I crafted a function to upload some data into my firebase database. My main concern is obtaining the Key that is generated after I successfully push the data into the ...

javascriptangularfirebasefirebase-realtime-databaseangularfire2

Codemirror - Advanced Auto-Suggest Feature with Separator

Can a separator be easily added in the hints/autocomplete addon? This separator would help transform the suggestion box to look like: f1 f2 f3 --- var1 var2 ...

javascriptcodemirror

The rationale behind organizing analogous variables into groups

Currently, I am grappling with determining the optimal logic for grouping parameters within a specified tolerance level. Let me illustrate this with an example... Task1: parameter1=140 Task2: parameter1=137 Task3: parameter1=142 Task4: parameter1=139 Task ...

javascriptphppythoncvba

Updating state based on input from a different component

I am attempting to modify the state of the page index in index.js from the Pagination component, Here is my index.js code: import useSWR from 'swr'; import { useState } from 'react'; const Index = ({ data }) => { const ini ...

javascriptreactjsnext.js

Using the v-for directive before applying the Vue directive

I need help with displaying images in a carousel from data fetched via Firebase. I have created a directive, but the problem lies with the v-for loop. The directive is executed before the v-for loop, resulting in no items in the carousel. Directive: di ...

javascriptvue.jsvuejs2

Is it necessary to release a new library version for non-functional updates?

As the maintainer of several JavaScript libraries, I often find myself needing to update dependencies that don't necessarily require any functional changes. This is especially true when my library is not impacted by a breaking change in one of its dep ...

javascriptnpm

Step-by-step guide on duplicating a div a set number of times

I am looking to replicate the entire div multiple times (e.g., on an A4 paper, top left corner, top right corner, bottom left corner, and bottom right corner). <script language="javascript" type='text/javascript'> function updateD ...

javascriptasp.netcss

Collaborate and reuse Typescript code across various Node projects

Imagine we have a project structured like this: webapps ProjectA SomeClass.ts Package.json ProjectB SomeClass.ts Package.json Common LoggingClass.ts Package.json The Common "LoggingClass" needs to import a module from NPM. Let's say that ...

javascriptnode.jstypescriptnpmshared-libraries