Ensure Focus Retention Upon Clicking Inside Iframe with li a:focus

How can I prevent my ul.SideNav_Main li a:focus class from losing focus when I click on the iframe or elsewhere on the page? Shouldn't it maintain focus until I click on another URL in the list?

Is it possible to solve this issue with just CSS, or would some JavaScript code be necessary?

My CSS:

ul.SideNav_Main {
    font-weight: bold;
    background-color: #ebf6f9;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    height: 100%;
    border-right: 1px solid #e6e6e6;
    position: fixed;
    overflow: auto;
}

ul.SideNav_Main li a {
    text-decoration: none;
    color: #2e849e;
    padding: 10px 20px;
    display: block;
}


ul.SideNav_Main li a:focus:not(.Active):not(.Logout) {
    background-color: #ffdb99;
}

ul.SideNav_Main ul.SideNav_Sub {
    font-size: 10px;
    font-weight: normal;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: auto;
}

My HTML:

<ul class="SideNav_Main">
    <li><a class="Active" href="yPage.php?ID=30000" target="_iframe">HOME</a></li>

    <li>
        <a href="#">RaspLot</a>
        <ul class="SideNav_Sub" id="T101">
            <li><a href="yPage.php?ID=10101" target="_iframe">Controlo Diário</a></li>
            <li><a href="yPage.php?ID=10102" target="_iframe">Balanços</a></li>
            <li><a href="yPage.php?ID=10103" target="_iframe">Consultar Artigos</a></li>
            <li><a href="yPage.php?ID=10104" target="_iframe">Inserir Artigos</a></li>
        </ul>
    </li>

    <li>
        <a href="#">Segurança</a>
        <ul class="SideNav_Sub" id="T301">
            <li><a href="yPage.php?ID=30101" target="_iframe">Alterar Password</a></li>
            <li><a href="yPage.php?ID=30102" target="_iframe">Alterar eKey</a></li>
        </ul>
    </li>

    <li>
        <a href="#">Master</a>
        <ul class="SideNav_Sub" id="T398">
            <li><a href="yPage.php?ID=39801" target="_iframe">Registry Access</a></li>
            <li><a href="yPage.php?ID=39802" target="_iframe">Registry Alert</a></li>
            <li><a href="yPage.php?ID=39803" target="_iframe">Explorer SSID</a></li>
            <li><a href="yPage.php?ID=39899" target="_iframe">Print_r</a></li>
        </ul>
    </li>

    <li><a class="Logout" href="yPage.php?ID=39900" target="_parent">Logout</a></li>
</ul>

When clicked, it gains focus

When clicked elsewhere on the page, it loses focus

javascripthtmlcss

Answer №1

The :focus pseudo-class is utilized to style elements once they have been focused, either by clicking on them or using the tab key. When you click elsewhere or navigate using the tab key, the previously focused element loses its focus. https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

To emphasize the active page, assign it a CSS class (e.g., .current-page) and apply additional styling:

ul.SideNav_Main {
    font-weight: bold;
    background-color: #ebf6f9;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    height: 100%;
    border-right: 1px solid #e6e6e6;
    position: fixed;
    overflow: auto;
}

ul.SideNav_Main li a {
    text-decoration: none;
    color: #2e849e;
    padding: 10px 20px;
    display: block;
}


ul.SideNav_Main li a.current-page:not(.Active):not(.Logout) {
    background-color: #ffdb99;
}

ul.SideNav_Main ul.SideNav_Sub {
    font-size: 10px;
    font-weight: normal;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: auto;
}
<ul class="SideNav_Main">
    <li><a class="Active" href="yPage.php?ID=30000" target="_iframe">HOME</a></li>

    <li>
        <a href="#">RaspLot</a>
        <ul class="SideNav_Sub" id="T101">
            <li><a href="yPage.php?ID=10101" target="_iframe">Daily Control</a></li>
            <li><a href="yPage.php?ID=10102" target="_iframe" class="current-page">Balances</a></li>
            <li><a href="yPage.php?ID=10103" target="_iframe">Consult Articles</a></li>
            <li><a href="yPage.php?ID=10104" target="_iframe">Insert Articles</a></li>
        </ul>
    </li>

    <li>
        <a href="#">Security</a>
        <ul class="SideNav_Sub" id="T301">
            <li><a href="yPage.php?ID=30101" target="_iframe">Change Password</a></li>
            <li><a href="yPage.php?ID=30102" target="_iframe">Change eKey</a></li>
        </ul>
    </li>

    <li>
        <a href="#">Master</a>
        <ul class="SideNav_Sub" id="T398">
            <li><a href="yPage.php?ID=39801" target="_iframe">Registry Access</a></li>
            <li><a href="yPage.php?ID=39802" target="_iframe">Registry Alert</a></li>
            <li><a href="yPage.php?ID=39803" target="_iframe">Explorer SSID</a></li>
            <li><a href="yPage.php?ID=39899" target="_iframe">Print_r</a></li>
        </ul>
    </li>

    <li><a class="Logout" href="yPage.php?ID=39900" target="_parent">Logout</a></li>
</ul>

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

Leveraging node.js and express for incorporating custom stylesheets and scripts

I recently designed a webpage with the following elements at the beginning: <link href="./css/font-awesome.min.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet ...

htmlcssnode.jsexpress

Display the input value in AngularJS in a customized format without changing the format in the model

When receiving an integer indicating a duration in minutes, I want to display it as hours or days if it exceeds a certain value. The ng-model should still keep the value in minutes so that any user changes are reflected accurately. For example: Reading & ...

javascriptangularjs

"Implementing a conditional statement in JS / JQuery without the need to

I'm interested in finding out if it's possible for a function's conditional statement to display the result whenever the argument is true, without needing to call the function again. Here is an example of such a statement: if($('#a&ap ...

javascriptjqueryconditional-statements

When the user clicks the back button in AngularJS

After searching extensively, I have yet to find a straightforward solution to my issue. The problem lies in a search/filter field that filters the page based on user input. While this filter works efficiently, it clears whenever a navigation item is clicke ...

javascripthtmlangularjs

Utilizing jQuery for AJAX-Based Deletion of Records

Hey, I stumbled upon a code snippet that allows me to delete a row from my database using Ajax. However, there seems to be an issue where the table that should disappear when deleted is not working properly. Here is the JavaScript code: <script type=" ...

phpjavascriptjquerymysqlajax

Guide on efficiently injecting data into a database using JavaScript and SQL from an array of objects

Let's simplify this process. I am creating a dynamic form for clients to submit data to a PostgreSQL database using React on the front end and NodeJs on the back end. Once the form is filled out, the inputs are stored in an array of objects like this ...

javascriptsqlnode.jsreactjspostgresql

Does every controller page need to verify the Login Function?

In my PHP pages, I have implemented the MVC Pattern by creating a controller page for each view page to interact with the Model page. However, I have only checked user login at the top of every view page and not in the controller page. This leaves a potent ...

phpjavascriptjqueryhtml

Exploring error management in Vue3 and Vite when deploying to production

After following the error handler setup in the Vue documentation, I encountered a difference between using it on the development server and in production. The error handler effectively pinpointed the component and line number where the error occurred durin ...

javascriptvue.jsvuejs3vite

The i18n feature in Nuxt 3 retrieves language locales from an external API

While working on my Nuxt 3 app, I encountered an issue when trying to integrate i18n. Despite conducting extensive research, I couldn't find any helpful information, hence I have a question. I am utilizing i18n with Prismic CMS. The locales array is s ...

javascriptvue.jsnuxt.jsinternationalizationvue-i18n

What is the best way to store article IDs using Javascript or HTML?

On my web page, I have a collection of links that users can interact with by clicking and leaving comments. These links are loaded through JSON, each with its unique identifier. But here's my dilemma - how can I determine which link has been clicked? ...

javascriptjqueryhtmljsonjquery-ui

What is the best method to invoke a function recursively with a delay of 1 second following the completion of an ajax

I am facing a situation where I need to implement a delay of 1 second after an ajax request is completed, regardless of the outcome. Instead of calling a method every second, I specifically want to call a function 1 second after the ajax request finishes. ...

javascriptjqueryajax

Issues with the background color of the bootstrap 'card' when implementing a QR code

How can I customize the background color for a Bootstrap card, specifically filling the entire card including the card text section? <div class="content"> <div class="card"> <img src="images/qr-code.png&q ...

htmlcssbootstrap-5

Trouble Deciphering JSON Array Using Eval Function

I'm facing an issue with two files in my project - one is a PHP file containing an array that is echoed using json_encode, and the other is a JavaScript file containing various functions for a webpage. One particular function in the JavaScript file is ...

javascriptajaxjsoneval

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

jqueryhtmlinsertafter

Transmit the identifier of the span tag to the URL seamlessly without the need to refresh

<div id="unique50">Greetings</div> Transfer the code 50 to the designated link by clicking on the specific div element without requiring a page reload ...

javascriptjqueryajax

Performing an AJAX call using jQuery within a PhoneGap application to communicate with a Node JS server

I've searched everywhere online for a practical demonstration of a jQuery AJAX call to a Node JS server, but to no avail. Typically, a jQuery AJAX request to a PHP server follows this format: $("button").click(function() { $.ajax({url: "http://w ...

javascriptjqueryajaxnode.jscordova

navigating up and down html elements using css selectors

Within my code, I have this odd repetitive HTML structure (with no classes) and I'm looking to extract all links along with the accompanying text below each link. While it's simple enough to grab all the links using a basic CSS query selector li ...

jquerycsscss-selectorsdom-traversal

activate a single on.click event to trigger additional actions - utilizing javascript and jQuery

My website features dynamically generated buttons that lead to specific pages. The challenge I'm facing is retrieving the automatically generated data-num value for each button and using it as a jQuery selector to redirect users to the corresponding p ...

javascriptjqueryonclick

Enter the Kannada language into the HTML text box or input field

My html form consists of about 15 - 20 input and textarea fields. As a user, how can I enter information in Kannda or any other local language? https://i.stack.imgur.com/60PVT.png ...

javascriptjqueryhtmlcss

Navigating a single page application with the convenience of the back button using AJAX

I have developed a website that is designed to function without keeping any browser history, aside from the main page. This was primarily done for security reasons to ensure that the server and browser state always remain in sync. Is there a method by whi ...

javascriptajax