There are 5 links on the page. When I click on each link, it changes color. However, when I move my cursor to another area of the page, the active link loses focus and I can't show its current state. Can you please advise me on how to fix this issue?
HTML
<tr>
<td>
<a href="#" class="linkbold">Basic2</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="linkbold">Basic3</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="linkbold">Basic4</a>
</td>
</tr>
CSS
.linkbold{ color:#0066FF; font-family:Tahoma; font-size:11px; text-decoration:none; font-weight:bold !important; }
.active { color: red; } // define any color for active class
// you can use CSS shorthand for font property
.linkbold { font: bold 11px Tahoma, sans-serif; color:#0066FF; }
If you want to learn more about CSS shorthand
jQuery
$('a.linkbold').on('click', function(){
$('a.linkbold').removeClass('active'); // remove any active class
$(this).addClass('active'); // and then add active class for clicked element.
});
<html>
<head>
<style type="text/css">
a:link {color:blue;}
a:visited {color:red;}
a:hover {color:green;}
</style>
</head>
<body>
<a href="#">first</a>
<br/>
<a href="#">second</a>
</body>
</html>
I am currently integrating the website's navbar using PHP, which is why I am unable to use class="active" to highlight the active tab on my navigation bar individually. To solve this issue, I attempted to add the active class to the corresponding tab ...
I have a function that I use to replace avatars of players with custom images. Currently, I have three replacement links hardcoded into a Chrome extension. However, I want the function to read an external txt file to dynamically build an array so that I ca ...
I'm currently working on integrating the menu.php file into my main.php. Here is what I have accomplished so far: Main.php <html> <body> <?php include("menu.php"); ?> <p>This is an example to demonstrate how ...
Currently, my web app is running on azurewebsites.net. I am looking to extract data from a text field or captured photos and save it in the CDS / Dynamics 365 CE database. The website design is complete; I just need to focus on storing the data efficient ...
Why is the fluid-container overlapping in this way, while others are not? Does this look correct to you, or am I overlooking something? It seems incorrect to me. <nav class="nav flex-column float-left"> {links} </nav> <div class="conta ...
I've been struggling with this issue for quite some time now. Despite scouring the first page of Google search results for "css change text on hover," I have not been able to find a solution. Inside a div, I have text that is styled and positioned us ...
Within my HTML code, I have a <div> that contains a whole partial view: <div class="bkgImg"> /* content goes here */ </div> Inside this main <div>, there are two additional <div> elements - one without a class and one wi ...
<div class="container"> <h1 class="text-center">Adding Items to Cart Using PHP</h1> <div class="row"> <?php $sql="select * from products"; $res=$con->query($sql) ...
"first of type" dont like to work: .elements { width:70%; margin:0 auto; display:flex; flex-direction: column; .addElement { width:280px; text-align: center; border:1px solid black; font-family: ...
I need a way to hide the 'sample' div when hovering over it and then show it again when the mouse moves away $('.secmenu').hover(function() { $('.sample').css('opacity', '0'); if ($('.secmenu&a ...
When I dynamically generate HTML code from markdown, I typically wrap it in the <p></p> tag like so: <p class="embedded_markdown"> ... <h1>...</h1> ... <h3>...</h3> ... </p> I decided to experiment with sho ...
Why doesn't the display:grid property stretch my content to the height of this column? The HTML structure row - col-6 is created using Bootstrap. I am aware that I can manually set a specific height for the parent container, but I would prefer not to ...
Struggling to retrieve the selected value from a drop-down list using JavaScript? Even when an item is chosen, do you keep getting 'null' as the result? Let's take a look at the HTML page: <select class="mySelect"> <option val ...
While the div is focused, spell checking is enabled which works well. However, once the focus is removed and there are spelling mistakes, the red squiggle lines for spell checking remain visible. After following the advice provided in this query: spellch ...
The 'quickstart' guide provides a comprehensive overview of using id and class css selectors within the html code. In order to link the map object to a specific div element, a target is required as an argument for the map object. This target val ...
Looking to create a numbered grid where the user inputs a number and the grid is generated. I am considering using CSS, HTML, or Jquery Mobile for an iPad project. I'm unsure of the best approach at the moment. I would like the grid and numbers to aut ...
I have successfully fixed the first 2 columns of a table, but now there is an extra row showing up in the table header. .headcol { position:absolute; width:7em; top:auto; left: 0px; } .headcol2 { position:absolute; width:15em; top:auto ...
I'm trying to loop over my SliderComponent function with different inputs within the HTML to generate multiple components, but I can't seem to get it to work. I came across a solution online that involves building a string and returning it as HTM ...
Using implicit width, which involves adding padding to an element containing text to give the parent container a specific but unstated width, can be quite elegant. However, it poses challenges when it comes to transitions. Is there a way to achieve a trans ...
I'm having some trouble changing the direction of a tag inside another tag. It's not working correctly for me. In the example below, I want to see aslami @ exactly as I have written it, but the result is showing @ before a instead of after i. ...