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

Display or conceal a frame with the help of JavaScript or jQuery

Is there a simple way to hide the "topFrame" and "menu" frames when clicking an image or button, and then unhide them by clicking again? Apologies for not including the "topFrame" and "menu" jsp files, as they are dynamically generated in my application. ...

javascriptjqueryhtml

What is the best way to expand the width of a table cell in a React + Material project?

Currently, I am utilizing material UI in conjunction with React to display my data in a table format. Within the table, there are specific titles such as "GENERAL_INFORMATION" and "INFORMATION" that I intend to center align. However, I have encountered an ...

javascriptreactjsflexboxmaterial-designmaterial-ui

I'm having trouble with Gutters GX and GY not functioning properly in Bootstrap, HTML, and CSS

I attempted to incorporate gutters into my Bootstrap grid layout, however, they are not showing up as expected. I am following the guidelines provided on the Bootstrap documentation, but for some reason, the gutters are not appearing. <!DOCTYPE html> ...

htmlcssbootstrap-5

Determining the specific condition that failed in a series of condition checks within a TypeScript script

I am currently trying to determine which specific condition has failed in a set of multiple conditions. If one does fail, I want to identify it. What would be the best solution for achieving this? Here is the code snippet that I am using: const multiCondi ...

javascripttypescriptconditional-statements

Unable to create a pie chart with chartjs using JSON data

I am having trouble creating a pie chart using canvas.JS. I have already tried iterating through them in a loop. The JSON data returned looks like this: [[{"label":"belum","x":1},{"label":"sudah","x":5}]] Below is the code I am using to retrieve the JS ...

javascriptjsoncanvasjs

The Art of CSS Arrangement

I'm experiencing an issue on my website PSR Is there a way to ensure that the Footer always appears below the content div automatically? Both the Content and the Footer have relative positioning. Additionally, how can I make the Footer the same siz ...

cssposition

When constructing a file directory URL, it is important to utilize the forward slash "/" in the filename

As I am creating a URL, the process involves taking the filename and using it to create a folder with that name. However, an issue arises if the name contains "/", as it causes the URL to break and creates an undesired location. For example: var fileDir ...

javascriptjquery

convert a string to JSON format using Node.js Express

Currently, I am viewing some string data in a browser that has been processed using python-node js express. The data looks something like this: In order to manipulate the data more effectively, I would like to convert it into JSON format that follows this ...

javascriptjsonnode.jsstringexpress

Leverage the AJAX Search Lite Plugin within the top navigation of your WordPress website's header file

I am interested in utilizing the "AJAX Search Lite 3.0.6" plugin within my WordPress Theme. Plugin Link After implementing the shortcode, I noticed that it was not appearing on the navigation bar as expected: <body> <!-- Header --> & ...

javascriptphpjqueryajaxwordpress

Bootstrap 4 Multinav Navigation with Adjusted Z-index

Using Bootstrap 4, I have created a modified multi-flyout navigation menu. The HTML code for this structure is as follows: <ul class="nav"> <li class="nav-item dropdown IFSUB"><a href="#" class="nav-link">Destinations</a> < ...

htmlsassbootstrap-4z-index

I am dynamically generating table rows and populating them with data. However, I encountered an issue with retrieving the data by their respective IDs

Creating a table row dynamically by populating it with data. However, encountering an issue with retrieving the data by their respective id. if(xmlhttp.status == 200) { var adminList = xmlhttp.responseJ ...

javascriptjqueryhtmlajaxweb

Leverage the specific child's package modules during the execution of the bundle

Project Set Up I have divided my project into 3 npm packages: root, client, and server. Each package contains the specific dependencies it requires; for example, root has build tools, client has react, and server has express. While I understand that this ...

javascriptnode.jstypescriptnpmwebpack

Struggling with D3.js Angular CLI where Scope disappears within the tick() function?

Hey everyone, I'm currently in the process of incorporating a D3 visualization network graph into an Angular CLI project (http://bl.ocks.org/mbostock/1153292) using the ng2-nvd3 component. Here's the Angular component: import { Component, OnIn ...

javascriptangularjsd3.jsgraphangular-cli

Toggle the input box by clicking the button

How do I show or hide the input box (blue square) when I click the search button (red square)? Link Image I attempted to create the transition in CSS and also experimented with JavaScript, but the JavaScript part confused me. Here is what I tried: $(" ...

javascripthtmlcsstransition

Could you assist me in setting up a loop for this Slideshow that times out and then resets back to the beginning?

Currently, I am in the process of developing a slideshow using jQuery. My main struggle lies in creating a loop that will timeout the slideshow for a specific duration, say 10 minutes, before it reappears and resumes indefinitely. Unfortunately, my attempt ...

jqueryhtmlcss

GIF Embeds with a Discord.js Bot

My bot is currently sending random gifs, but they are not embedded. I would like to send random gifs with embeds instead. How can I achieve this? Here are the codes: if (msg.author.bot) return; if (msg.content.toLowerCase() === prefix + 'xgif&ap ...

javascriptnode.jsdiscorddiscord.js

Removing all Null Form Inputs from the Document Object Model upon Submission utilizing JavaScript

I am currently working on a conditional Shopify form that was passed down to me from another developer. The form utilizes JavaScript/Jquery for field validation, ensuring that all mandatory fields are completed before proceeding to the next step. After mak ...

javascriptjqueryformsvalidationshopify

What is the best way to include the "onChange" function in a component that does not natively support this prop?

After finding a useful code snippet on this page to switch languages, I attempted to enhance it by incorporating material UI components for better styling. However, whenever I change the language, it redirects me back to the home page because the MenuList ...

javascriptreactjsmaterial-ui

Utilizing babel-plugin-root-import in conjunction with babel 7

Recently, I decided to dive into setting up Babel 7 for the first time. It's been a bit of a learning curve as I navigate through unfamiliar territory. While I was able to successfully install and utilize @babel/plugin-proposal-optional-chaining, I&ap ...

javascriptnode.jsbabeljs

What is the best way to expand an object without including any null values?

Imagine a scenario where there is an object: var user = { "Name": "Dan", "Age": 27, "Hobbies": null }; and it needs to be merged with the following base object to ensure all necessary properties are present: var base = { "Name": nul ...

javascriptjquery