Question

我目前正在为一张专辑制作一个菜单，我想在我点击其中一个专辑链接后立即保持悬停效果。

我已经在css中获得了这个类，它被命名为“.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>";

}

?>

风格：

nav ul li a:hover, nav ul li a.active {
    font-size: 20px !important;
    background-color: #2d2d2d;
    color: #b8df45;
}

我尝试过这样的事情，但是没有用。

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>";

}

Answer 1

为链接指定一个类，然后为要添加类的Jquery函数指定：

添加课程＆＃34;链接＆＃34;链接：

<?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");
  });
});

您也可以使用代码内联，但不建议：

 echo "<a onclick='$(this).addClass(\"active\")' href='index.php?page=portfolio.php&album=$album_id'><p class='albums'>- $album_title</p></a>";

这没有Jquery：

<a onclick="this.setAttribute("class", "active");">

Answer 2

您可以使用javascript在链接中添加类或样式，当它被单击时，可以为其提供正确的样式。

样式是代码中的缺失，所以我无法使用它。但你可以这样做：

echo "<a href='...' onclick=\"this.style='...';\">...</a>";

在javascript中，或者在JQuery的帮助下，还有很多其他方法可以做到这一点。

当我点击链接时，如何保持我的悬停效果处于活动状态？

2 个答案: