Php 使用css和jquery在图库中的活动图像周围添加边框
我正在使用PHP将目录中的缩略图渲染为水平图库。我试图通过将图像设置为“活动”，在单击的图像周围添加边框，但该设置不起作用。下面是html和cssPhp 使用css和jquery在图库中的活动图像周围添加边框,php,jquery,html,css,Php,Jquery,Html,Css,我正在使用PHP将目录中的缩略图渲染为水平图库。我试图通过将图像设置为“活动”，在单击的图像周围添加边框，但该设置不起作用。下面是html和css <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <style> #loaded_img_panel { display:fle
<!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>
#加载的img面板{
显示器：flex；
柔性包装：nowrap；
}
#加载的img面板>ul>li{
列表样式：无；
}
#已加载仪表盘ul li仪表盘{
显示：内联；
宽度：210px；
高度：175px；
保证金：0；
填充：0；
光标：指针；
}
#加载的仪表盘仪表盘：激活{
边框：0.4em纯红；
}
#已加载\u图像\u面板图像：悬停{
不透明度：0.5；
边框：0.4em纯红；
}
window.addEventListener（'load'，函数（e）{
var folder=“缩略图”；
如果（文件夹！==null&&folder！==“”）{
$.post（“loadimages.php”，{'folder'：folder}，函数（输出）{
$（“#加载的_img_面板”）.html（输出）.show（）；
});
}
});
//在选定图像周围放置边框
$（'loaded#img_panel'）。在（'click'，'img'，function（）上{
$（'loaded#img#panel img'）。removeClass（'active'）；
$（this.addClass（'active'）；
})
<?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>';
}
?>
我尝试过，将单击路径从img更改为
#loaded#img#panel>ul>li>img#loaded#img#panel img:active#loaded#img#panel img.active活动：活动#加载的img#panel img:active#加载的img#panel img.active