0

我正在使用 PHP 将目录中的缩略图呈现为水平画廊。我试图通过将图像设置为 来在单击的图像周围设置边框active，但这是行不通的。以下是html和css。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<style>
  #loaded_img_panel {
    display:flex;
    flex-wrap: nowrap;
  }

  #loaded_img_panel > ul > li {
    list-style: none;
  }

  #loaded_img_panel ul li img {
    display: inline;
    width: 210px;
    height:175px;
    margin: 0;
    padding:0;
    cursor: pointer;
  }

  #loaded_img_panel img:active {
      border: 0.4em solid red;
  }


  #loaded_img_panel img:hover {
      opacity: 0.5;
      border: 0.4em solid red;
  }
</style>

</head>
<body>
  <div class="loaded_img_panel" id="loaded_img_panel">    
  </div>
</body>
</html>

<script>
  window.addEventListener('load',function(e) {
  var folder = "thumbnails";
  if (folder !== null && folder !== "") {
    $.post("loadimages.php", {'folder' : folder}, function(output){
      $("#loaded_img_panel").html(output).show();
      });
    }   
  });

  //Put border around the selected image
  $('#loaded_img_panel').on('click', 'img', function() {
    $('#loaded_img_panel img').removeClass('active');
    $(this).addClass('active');
  })
</script>

以下是php脚本：

加载图像.php

<?php
session_start();
$folder = $_POST['folder'];
$tardir = "projects/" . $folder . "/thumb/*.jpg" ;
$files = glob($tardir);
for ($i=0; $i<count($files); $i++)
{
    $num = $files[$i];
    $filname = basename($num, ".jpg");
    $filnam = substr($filname, -5);
    $filnam = rtrim($filnam);
    echo '<ul class="item">';
    echo '<li><img src="'.$num.'" id="thumbNails'.$filnam.'"/>';
    echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
    echo '</li></ul>';
}

?>

php 渲染目录中的图像，css 将其设置为水平图库。在悬停和单击时，我可以看到红色边框，但是当我释放鼠标时，该框消失了。

我尝试将点击路径从 img 更改为#loaded_img_panel > ul > li > img和类似的其他变体，但它们不起作用。

4

1 回答 1

1

您需要更改 #loaded_img_panel img:active 为 #loaded_img_panel img.active. 这样，一旦您将active类分配给图像，它将保持突出显示，而不是仅在您单击它时（这就是:active）的含义。

于 2018-09-23T04:09:55.680 回答