根据 HTML 中选定的类别显示图像答案

【问题标题】：Show image based on selected category in HTML根据 HTML 中选定的类别显示图像
【发布时间】：2013-07-09 06:01:59
【问题描述】：

我有 menu.html 页面，在该页面中，我有环境、噪音、污染等类别。每个类别都有子类别。根据类别和子类别的选择，我必须在下一页显示不同的图像和不同的字体颜色...

HTML/JavaScript 中的任何想法/建议 ....

谢谢库马尔

【问题讨论】：

您应该为您的问题添加更多详细信息，例如您迄今为止尝试过的内容或任何小提琴在此处分享。
看来你对 HTML/javascript 不太了解。只是不要紧张:)。尝试在谷歌上搜索您的解决方案。你会得到很多解决方案..
你可以发布你的代码吗？以便我们帮助你......

标签： javascript html

【解决方案1】：

css 类呢？你可以给特定的类一个 font-color 和 background-image。

【讨论】：

【解决方案2】：

如果您要链接到另一个页面，您可以将查询字符串添加到URL 并从第二个页面对其进行操作。

<a href="page.html?font=red&image=pollusion">Pollusion</a>

【讨论】：

【解决方案3】：

<script type="text/javascript">
    function changeImage(){
        var selectBox = document.getElementById("selectbox");
        var selectedValue = selectBox.options[selectBox.selectedIndex].value;
        document.getElementById("img").src = selectedValue + ".png";
    }
</script>

您也可以使用selectBox.options[selectBox.selectedIndex].innerHTML 检查所选内容的值。如果您有很多选项并且不想设置所有内容的值，那将更容易。

如果您服务器上的图像与每个选项的值具有相同的名称，您甚至不需要使用 if 语句。但是，如果图像在不同的位置或具有不同的名称/扩展名，您可以这样设置代码：

<script type="text/javascript">
    function changeImage(){     
        var selectBox = document.getElementById("selectbox");
        var selectedValue = selectBox.options[selectBox.selectedIndex].value;
        var img = document.getElementById("img");
        if (selectedValue == "html"){
            img.src = "images/html.png";
        } else if (selectedValue == "css"){
            img.src = "images/css.jpeg";
        }
    }
</script>

【讨论】：