I im currently making an menu, for an album where I want to have an hover effect that stays on as soon as I clicked on one of the album links.
I already got the class in css, it's named " .active "
<?php
$query = "SELECT album_id, album_title FROM albums WHERE fk_category_id = 1";
$result = $mysqli->query($query);
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
$album_title = $row['album_title'];
$album_id = $row['album_id'];
echo "<a href='index.php?page=portfolio.php&album=$album_id'><p class='albums'>- $album_title</p></a>";
}
?>
Style:
nav ul li a:hover, nav ul li a.active {
font-size: 20px !important;
background-color: #2d2d2d;
color: #b8df45;
}
I tried doing something like this, but it does not work.
if(isset($_GET['album'])){
$album_number = $_GET['album'];
}
$query = "SELECT album_id, album_title FROM albums WHERE fk_category_id = 1";
$result = $mysqli->query($query);
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
$album_title = $row['album_title'];
$album_id = $row['album_id'];
$class = "";
if ($album_number == $row['album_id']) {
$class = "active";
}
echo "<a class='$class' href='index.php?page=portfolio.php&album=$album_id'><p class='albums'>- $album_title</p></a>";
}
Specify a class to you links and then a Jquery function to add class:
Adding class "link" to links:
<?php
$query = "SELECT album_id, album_title FROM albums WHERE fk_category_id = 1";
$result = $mysqli->query($query);
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
$album_title = $row['album_title'];
$album_id = $row['album_id'];
echo "<a class='links' href='index.php?page=portfolio.php&album=$album_id'><p class='albums'>- $album_title</p></a>";
}
?>
Jquery:
$(document).ready(function(){
$(".links").click(function(){
$(this).addClass("active");
});
});
You can also do this inline with your code but not recommended:
echo "<a onclick='$(this).addClass(\"active\")' href='index.php?page=portfolio.php&album=$album_id'><p class='albums'>- $album_title</p></a>";
and this is without Jquery:
<a onclick="this.setAttribute("class", "active");">
You can add a class or style to the link with javascript, when it is clicked, that gives it the proper style.
The styles are missings from your code, so I cannot work with that. But you could do something like:
echo "<a href='...' onclick=\"this.style='...';\">...</a>";
There are many other ways to do this in javascript, or with the help of JQuery.