Css 在不创建更多页面的情况下更改html中图像的内容

我想问以下问题。我已经从一个免费的html css模板创建了一个简单的网站，我已经找到了，我面临着以下问题

我想创建一些画廊，但我有很多图片分为许多类别，我不知道是否有一种方法不必创建太多的页面

我想有1html，它将有一些数据容器排序，并根据所选的类别，相关的图像和文本应加载，而不必为每个类别创建1html

---

我对webblsites比较陌生，我不知道什么可以用于此目的，如果可能的话。

是的，那将是PHP-您可以有一个单独的页面，并动态生成内容

在一个答案中浏览整个基于类别的图库不是很明智，但是如果你在谷歌上搜索，你应该能够找到大量简单的基于php的图库

---

很多照片都需要SQL数据库来生成带有缩略图等的“gallery”视图。

它很简单，将照片保存在同一类别的单个div下。使用Jquery根据您的选择显示隐藏

HTML

您有不同的选项，而不是单选按钮，您可以使用锚链接。。做些调查

---

fiddle

这更像是一个想法，而不是完整的代码，供您插入您的站点

我想到了一些组织图片的方法：根据类别和子类别将图片URL保持在多维数组中。然后根据下拉菜单中的选择动态填充您的库。这些都显示在一页中

下拉菜单会将类别显示为选项

HTML:

选择图片
动物
-猫
-狗
汽车
帽子

Javascript中的数组类似于：

[[cat1，cat2]，[dog1，dog2]，[car1，car2]，[hat1，hat2]

所以选择猫会显示猫的图片，而选择动物会显示猫和狗的图片

---

这里有一个。

另一个解决方案是使用jQuery显示/隐藏页面的某些部分（某种选项卡式视图）。有很多解决方案，但没有一个是学习基本网页标记的人可以轻松解决的。

<input type="radio"  value="category1" name="type" />Category1
<input type="radio"  value="category2" name="type"/> Category2
<div class="category1" style="display:none;">
<ul>
<li><img src="photo1.jpg"/>Photo1</li>
<li><img src="photo2.jpg"/>Photo2</li>
</ul>
</div>

<div class="category2" style="display:none;">
<ul>
<li><img src="photo3.jpg"/>Photo3</li>
<li><img src="photo4.jpg"/>Photo4</li>
</ul>
</div>

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="category1"){
            $(".category2").hide();
            $(".category1").show();
        }
        if($(this).attr("value")=="category2"){
            $(".category1").hide();
            $(".category2").show();
        }

    });
});

<select id="menu">
    <option value="0">Choose pictures</option>
    <option value="1">Animals</option>
    <option value="1.1"> - Cats</option>
    <option value="1.2"> - Dogs</option>
    <option value="2">Cars</option>
    <option value="3">Hats</option>
</select>

<div id="gallery"></div>