I've been attempting to format a text menu in my CSS so that the link matches the current URL, but it doesn't appear to be working. Here's the code snippet:
#pages.tabs ul li a[href$=location]{color:blue !important;}
, where #pages.tabs ul li represents the menu list containing the links. I assumed that the location parameter would hold the current URL in CSS. However, I'm not sure if this can actually be accomplished with CSS alone.
Thank you in advance for any help or advice!
Remember to only utilize addClass or removeClass functions from JQuery.
Here is the CSS code snippet provided:
.liactive{background-color:#3C6EC9;}
Check out the JQuery code below:
$(document).ready(function(){
$('ul li').click(function(){
var items=$('ul li').get();
for(var i=0;i<items.length;i++)
$(items[i]).removeClass('liactive');
$(this).addClass('liactive');
});
});
I've prepared this code for you. Enjoy using it ^^ You can test it out here --------> Knee's JSFiddle
To achieve this effect, you cannot rely on just css; you also need to incorporate javascript. Assign a class to the current URL li element and style it using css. Here is an example:
HTML
<div class="navbar">
<ul>
<a href="../index.html"><li>Home</li></a>
<a href="usefulsites.html"><li>Useful Sites</li></a>
<a href="software.html"><li class="currentpage">Software</li></a>
<a href="workbench.html"><li>The Workbench</li></a>
<a href="contact.php"><li>Contact</a></li></a>
</ul>
</div>
CSS
.currentpage {
color: #640200;
background-color: #000000;
}
In my HTML project, I am using JavaScript to insert style elements into the head section. I have implemented a function that should inject styles into a specific id within the head tags. This is a snippet of my current HTML code: function insertAtElemen ...
I'm attempting to manually input CSS for font-face in a new window with the following code: const css = '@font-face {font-family:Roboto; src:url("assets/fonts/Roboto-Black.ttf");}'; const head = this.externalWindow.document.getElementsByTag ...
Currently, I am experimenting with jQuery's .animate() function to change the background of a div when it is scrolled more than 100 pixels down a page. Previously, I had successfully used .css() for this purpose. JS: $(window).scroll(function () { ...
I am currently working on a form that includes a textbox and a button for submitting data using ajax. <input type="password" id="password" /> <button id="addaccount" onclick="showload();">Add</button> When the user clicks on the button, ...
My CSS code looks like this: #searchbar-wrapper input#header-searchbar:focus + #search-dropdown-wrapper { display: block; } The purpose of this code is to make a dropdown visible when a user focuses on a textbox. The default behavior should be th ...
I have a question that may have been asked before, but I haven't found a satisfactory answer yet. Within my HTML code, I have a SPAN element with an onclick event, like so: <span onclick='loadDiv()'>Text</span> When a user cli ...
I'm struggling with controlling CSS animations that I want to start only when the element becomes visible on the screen. The issue arises because I have a website with a total height of around 8000px and the element with the animation is located far d ...
I am interested in finding a way to connect my local HTML page with my C++ application. Similar to using the JavaScript console to make real-time edits to a webpage, like this: document.getElementById('divlayer').style.visibility = 'hidden& ...
I am encountering an error in the browser console, could someone please explain what it means?This is a screenshot of the HTML file displaying the error. https://i.sstatic.net/8Y7Ri.png Currently, I am working on a web page using Bootstrap. I have includ ...
Take a look at the following code snippet: <head> <title></title> <style> .section_divs { background-color: lightblue; float: left; } #section_empty { background-color: tomato; width ...
After using a button in Bootstrap 4, it appears as follows: https://i.sstatic.net/laGLo.png <button type="button" class="btn btn-primary" target="_blank">Download</button> On the other hand, when I substitute an anchor with the same button s ...
After multiple attempts, I am still facing an issue with setting up the Google Map on my website. Despite inputting different coordinates, it consistently shows a location in China instead of the intended one. Here is the code snippet that I have been usin ...
I'm currently diving into the world of Bootstrap grids and trying to wrap my head around the concepts of push and offset. In the showcase below, I have two rows that only differ in how the third column is positioned - one using a push and the other an ...
Currently, I am working on a design that involves organizing several <DIV> elements in a vertical manner while still maintaining responsiveness. Here are some examples: Wider layout Taller layout I have tried using floats, inline-block display, ...
Here is an interesting HTML structure that includes a list and input field: <li> <span>19</span> </li> <li> <span>20</span> </li> ...
Can someone help me figure out why my register and login options are overlapping? I'm pretty new to this so it might be a simple fix. Also, I'm trying to get the dropdown menu to appear right below the login text, but I'm facing some issues ...
I have a PHP file with an embedded JSON file, and I want to update the JSON file with new information from a form. The form looks like this: <form action="process.php" method="POST"> First name:<br> <input type="text" name="firstName"> ...
Currently, I have a circular div that has been styled using CSS animations. My goal is to keep the size of the circle consistent when it moves to the bottom, but reduce its size when it bounces back to the top. I am uncertain if this can be achieved solely ...
Check out my jsfiddle: http://jsfiddle.net/7vv9e/2/ In the fiddle, click on the "Add Question" button multiple times until a scroll bar appears next to the table. I am looking to keep the header fixed while scrolling. How can this be achieved? Below is ...
Issue with select dropdown not pre-selecting values in ngFor based on ngModel. Take a look at the relevant component and html code: testArr = [ { id : '1', value: 'one' }, { id : '2', ...