hdidng html中的一行 [英] hdidng a row in html

问题描述

我有两个单选按钮'a'和'b'，如果选择'a'，那么我想要显示不同类型的行或选项，如果选择'b'则其他。

这可以在html中完成，或者我必须使用java脚本或php

I am having two radio buttons 'a' and 'b' and if one selects 'a' then I want different sort of rows or options to get displayed and if one selects 'b' then other.
Can this be done in html or I have to use java script or php

推荐答案

如果你真的不想使用Javascript ，这是使用HTML和CSS3实现此目的的一种方法。



将每个单选按钮直接放在其关联部分之前以显示或隐藏。这样，您可以利用 + 相邻的兄弟选择器，结合：checked 伪类（仅限CSS3），只有在它之前显示该部分通过选中的单选按钮：

If you really don't want to use Javascript, here's a way to accomplish this with HTML and CSS3 only.

Place each radio button directly before its associated section to show or hide. This way, you can take advantage of the + adjacent sibling selector, in combination with the :checked pseudo-class (CSS3 only), to show the section only if it's preceded by a checked radio button:

input:checked+.TargetSection {
    display: block;
}

使用绝对定位，目标部分仍然可以显示在单选按钮下方，即使标记混合在一起。



以下是一个示例： http://jsfiddle.net/4uM8T/ [ ^ ]

这篇关于hdidng html中的一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！