如何在css中制作可见和不可见的容器答案

【问题标题】：How to make visible and invisible container in css如何在css中制作可见和不可见的容器
【发布时间】：2022-08-22 22:05:26
【问题描述】：

我有个问题。在这里，您可以看到用红色矩形标记的类型切换器和容器。每个容器都有自己的 ID。当在类型切换器中选择一个选项时，所有其他容器都应该是不可见的。 For example, when option \"Furniture\" is selected only last container with id \"Furniture\" should be visible, and all other invisible.我完全不擅长 jQuery。请帮我。 [![类型切换器和红色矩形标记的容器][1]][1] HTML 代码：

                <label id=\"caption\" style=\"line-height: 180%;\">SKU <input type=\"text\" id=\"text-field\" name=\"sku\" style=\"margin-left: 37px;\"/></label><br />
                <label id=\"caption\" style=\"line-height: 180%;\">Name <input type=\"text\" id=\"text-field\" name=\"name\" style=\"margin-left: 21px;\"/></label><br />
                <label id=\"caption\" style=\"line-height: 180%;\">Price($) <input type=\"text\" id=\"text-field\" name=\"price\" style=\"margin-left: 2px;\"/></label><br />
                <br />
                <label id=\"caption\">Type Switcher<select id=\"productType\" name=\"type\" style=\"margin-left: 5px;\">
                    <option value=\"D\">DVD</option>
                    <option value=\"B\">Book</option>
                    <option value=\"F\">Furniture</option>
                </select></label>
                <br /><br /><br />
                <div id=\"DVD\">
                    <p style=\"text-align: left; line-height:180%;\" id=\"caption\">Please provide size in MB</p>
                    <label id=\"caption\" style=\"line-height: 180%;\">Size (MB) <input type=\"number\" name=\"size\" style=\"margin-left: 2px\" /></label>
                </div>
                <div id=\"Book\">
                    <p style=\"text-align: left; line-height:180%;\" id=\"caption\">Please provide weight in KG</p>
                    <label id=\"caption\" style=\"line-height: 180%;\">Weight (KG) <input type=\"number\" name=\"weight\" style=\"margin-left: 2px\" /></label>
                </div>
                <div id=\"Furniture\">
                <p style=\"text-align: left; line-height:180%;\" id=\"caption\">Please provide dimensions in HxWxL format</p>
                    <label id=\"caption\" style=\"line-height: 180%;\">Height (CM) <input type=\"number\" name=\"height\" style=\"margin-left: 5px\" /></label><br />
                    <label id=\"caption\" style=\"line-height: 180%;\">Width (CM) <input type=\"number\" name=\"width\" style=\"margin-left: 11px\" /></label><br />
                    <label id=\"caption\" style=\"line-height: 180%;\">Length (CM) <input type=\"number\" name=\"Length\" style=\"margin-left: 2px\" /></label><br />
                </div>
            </form>``` 


  [1]: https://i.stack.imgur.com/rJpyx.png

标签： javascript html jquery css forms

【解决方案1】：

这是图像。我不知道为什么它没有到帖子。

【讨论】：