Looking for help with my current HTML code:
<li><a href="index.php" id="1" onclick="document.getElementById('1').style.background = '#8B4513';">Weblog</a></li>
The color changes while clicking, but when the link opens index.php, the color resets to its original. How can I make the color stay the same on a different page?
Any suggestions would be appreciated.
Based on the provided code, it appears you are attempting to customize an element after a user has interacted with a link.
In this case, Javascript may not be needed. You can achieve this by using the :visited css pseudo-class to modify the element's style.
Here is an example:
a:visited { text-decoration: line-through; }
When working with JavaScript, changes are made on the client-side, which means they occur directly on the user's screen.
In contrast, PHP operates on the server-side. Requests are sent to the server for processing and then the output is displayed.
If your goal is to emphasize the current webpage, using JavaScript might not be the most effective approach.
One suggestion is to incorporate a line of PHP code in each file within the li a-list. For instance:
<?php if ($URL == 'index.php') echo 'class="selected"'; ?>
You can then utilize CSS to style the link with the "selected" class in red color.
It is important to note that an ID cannot begin with a number.
The recommended approach is to identify the active page on the server side and assign it a class such as "selected." Utilize CSS to style it accordingly:
li.selected a
{
background: #8B4513;
}
If you are unsure about implementing PHP to set a selected page, refer to this informative article:
I'm encountering issues while trying to incorporate a function generator within a GraphQL mutation. The function generator is utilized to streamline the promise chain inside the mutation. Prior to refactoring the code, everything was functioning corr ...
Currently, I am developing a mobile-based web application that heavily relies on AJAX and Javascript. The process involves users logging in through a login page, sending the data via post to the main page where it undergoes a mySQL query for validation. If ...
Managing time out situations in a web application when calling a REST API is crucial. Below is the code snippet I am using to make the API call with jQuery ajax. $.ajax({ type: "POST", url: endpoint, data: payload, ...
I have a ul-li list and when i hover last li ::before element looks white and not so good. I want to change it when i hover the last li element. How can I achieve this? Here are my codes: <div className="dropup-content"> <ul> & ...
JavaScript if ((valid1 && valid2 && valid3 & valid4 && valid5 && valid6 && valid7 && valid8)==1) { // include an image in the specified ID. document.formElem.next1.disabled=false; } else { docume ...
I'm currently developing a web application that will handle CRUD operations on an array within a collection. Here is the structure of the collection model: var mongoose = require('mongoose'); var website = require('./website'); ...
Looking to filter and sort a nested tree object for a menu If the status for sorting and filtering is true, how do I proceed? const items = [{ name: "a1", id: 1, sort: 1, status: true, children: [{ name: "a2", id: 2, ...
As I venture into the world of node.js apps, I find myself faced with a dilemma. I've created a REST API using node.js that functions perfectly on my local machine. However, when I attempt to build it using webpack, I'm uncertain about how to run ...
How can I send the value of NewText in its original form from .cs code using an ajax call? **var NewText ="D'souza";** $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: " ...
Can someone assist me with a design issue I'm facing? I have two divs within a section. The left div contains a heading and a button, while the right div contains a video. However, when I try to add a background image to ...
I previously inquired about setting the font-weight to bold on a text element when selected. Thanks to @Eric, this has been successfully implemented! However, I am facing an issue where clicking on one text makes it bold, and then clicking on another text ...
My code is running fine on CodePen (link provided below), but for some reason, it's not working properly in the web browser. I am executing the code from localhost and the button isn't responding as expected. CODE Here is my Visual Studio code ...
Is there a way to dynamically add different classes based on validation outcomes in React? My current implementation looks like this: className={ validatorState === RIGHT ? 'ok' : 'no' } However, I also need to handle cases where the ...
I am in the process of building a simple web application. Today, I installed Couch 1.3.1 and set up a database. I am currently trying to save a document to my local Couch (localhost:5984) using a POST request from a client browser that is also on localhost ...
I am experiencing some challenges when attempting to position the cursor after an <i> tag within a contenteditable element. Currently, this is what I have: <p contenteditable="true"><i>H</i><i>e</i><i>l</i> ...
Currently, I am implementing Waypoint (version 7.3.2) in my React project using React version 16. My goal is to create a scrollable list of items where each item fades out as it reaches the top of the container div. My main inquiry is how can I obtain a re ...
While using my express application with the mLab database, I encountered an issue. When trying to find only one record, everything works fine. However, when attempting to retrieve a list of users from the database, I receive the following response. Query ...
After some attempts, I'm working on getting this code to function properly using useState: https://codesandbox.io/s/rdg-cell-editing-forked-nc7wy?file=/src/index.js:0-1146 Despite my efforts, I encountered an error message that reads as follows: × ...
I have encountered an issue while passing a function from the parent component to the child component's Input() property. The problem arises when the parent's function is called within the child component, causing the this keyword to refer to th ...
I'm having trouble centering the contents of a div with my code. The properties I am applying don't seem to work. Any idea why this is happening? <div class='center'> <form (ngSubmit)="loginUser()" style="background: steel ...