Question

我做了一个gallery.php。代码如下：

<div id="galleryImage">    
    <ul>    
        <li>
            <a href= "gallery.php?imgName='artistvan'">
            <img src="thumbnail/artistvan.jpg" title="The artist van" alt="The artist van"/></a>
        </li>
        ....
        ....
    </ul>
</div>

我为25张图片保留了25个li标签。

thumnails位于div标签的右侧。单击缩略图时，将显示相关图像。我传递imgName作为参数。因此，它从MySQL中检索相关图像。

我的问题是，当我点击缩略图时，该缩略图应该更改，以便可以找出点击了哪个链接。在我点击的那一刻，它会检索图像，但点击的图像和未点击的图像之间没有区别。

我已经尝试了很多CSS和一些javascript但我无法弄清楚。我很感谢你的帮助。非常感谢。

Answer 1

尝试使用jQuery添加一些用于指示点击缩略图的类：

$('.myThumbnail').click(function(){
    $(this).addClass('clickedThumbnailClass');
    /* rest of code */
})

Answer 2

您可以尝试jQuery。在任何情况下，您都不想使用jQuery，请查看add and remove a class without jQuery

$('#galleryImage img').click(function() {
    $(this).addClass('active');
});

<强> JSFIDDLE

Answer 3

与其他图像没有太大区别，但为了防止其他图像产生相同的效果，您应该包含这一额外的行。

$('ul li')，请务必将ul li更改为您的图片选择器。

jQuery的：

$(document).ready(function() {
    $('ul li').on('click', function() {
       $('ul li').removeClass('active'); // removes the active class form the other images
       $(this).addClass('active'); 
    });
});

最后，小提琴：Demo

要设置您的网站以使用jQuery，请按照以下步骤操作

确保将其添加到<head>标记以链接到jQuery库：

<script type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

接下来，您可以将脚本添加到脚本标记或其自己的.js文件中：

<script type="text/javascript">
   /* Script goes here */
</script>

脚本标记可以在html doc的结尾处开始。

在gallery.php中单击缩略图时突出显示该缩略图

3 个答案: