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 am facing an issue with my page where a list of Leads each have specific actions that are represented by forms. These forms can be displayed multiple times on the same page. Each form has its own scope and controller instance. After submitting a form, an ...
As a non-developer trying to learn react.js, I am working on a section of my website that needs to update every few seconds with new content like a photo, header, and body text. I've encountered an issue where the data refreshes correctly after the p ...
To prevent vertical scrolling on mobile devices, I attempted using the CSS code: body {overflow-x:hidden} This successfully disables vertical scrolling in regular browsers. However, if there is an element wider than the screen on mobile, it still allows ...
After exploring the technique demonstrated by Mike Riethmuller, which involves utilizing calc() to create a fluid font-size transition between a minimum and maximum value, I found the outcome obtained from calc() in the browser somewhat perplexing (and not ...
Attempting to incorporate the Bootstrap Material design theme into my project, I have implemented a basic text input field using the code below: <div class="form-control-wrapper"> <input class="form-control empty" type="text"></input> ...
In my project, I am faced with the challenge of validating inputs only after a submit button is clicked. However, I have noticed that the required rule is being activated after losing focus. This issue arises while using VeeValidate in Vue.js. Here is the ...
import * as React from "react"; import Button from "@material-ui/core/Button"; import * as PropTypes from "prop-types"; import {WithStyles} from '@material-ui/core'; import "./App.css"; import PageTwo from "./components/PageTwo"; ...
const fetchData = async (key) => { try { const jsonData = await AsyncStorage.getItem(key) return jsonData != null ? JSON.parse(jsonData) : false; } catch(error) { console.log(error); } } useEffect ...
I am currently working with Angular 10 on the front-end and obtaining a JWT from backend services. I am seeking the best method to securely store my Okta JWT in the browser while also mitigating the risk of XSS and XSRF attacks. I have looked into storing ...
Why am I encountering an error when trying to import a valid node_module? <script > var Twit = require('twit'); </script> Error: Uncaught ReferenceError: require is not defined I am puzzled as to why the require() function wor ...
I am working on a simple HTML file that includes a heading and two empty div elements. <h1>Blablabla.</h1> <div id="div1"></div> <div id="div2"></div> These two divs need to be populated with SVG content generated usin ...
My slider is set up to display three elements, but I'm having trouble aligning one or two elements to the left instead of centering them. jQuery(function () { jQuery('.slider-blog').slick({ arrows: false, dots: true, ...
Currently working on improving an AngularJS project and looking for ways to identify areas of improvement, such as memory leaks, browser performance, data rendering issues, and screen freezes. I attempted using Jmeter but it only shows page navigation spee ...
Initially, I find myself torn between using method or type, where if I define the method in the form, do I still need to define it in the ajax call? If not, why does ajax return undefined in the console? Furthermore, the code below triggers a 405 POST met ...
While attempting to create a function that runs on the $(document).ready() event and is supposed to generate a new div, I encountered an issue. Whenever I try to create another div with the same DOM and Class attributes but in a different position, a probl ...
Has anyone encountered a permission error with npm when trying to update to the latest version? I recently tried updating npm and received this error message. I'm unsure of how to resolve it. Any suggestions? marshalls-MacBook-Air:Desktop marshall$ n ...
My objective is to pass arguments through the command line using yarn start to index.ts. "scripts": { "start": "tsc-watch --onSuccess \"ts-node --pretty -r tsconfig-paths/register' src/index.ts\"", } When I attempt something like: yarn ...
Here is my code setup: const Dashboard = React.createClass({ getInitialState(){ return { user: JSON.parse(localStorage.getItem('user')) }; }, componentWillMount(){ var self = this; $.get({ url: 'http://127 ...
After stumbling upon this post on Medium, I decided to implement its concepts into my project. My goal was to verify a user's authorization to access a particular route, and if unauthorized, display a modal pop-up. In order to achieve this, I made s ...
Greetings, I'm seeking assistance in replicating a specific button click on a website. Here is the code for the button: <button type="button" class="btn btn-link btn-xs" onclick="getComponents('188855', '5a0f44a9d70380.12406536&apo ...