使用隐藏的checkboxes来存储一些CSS布尔值


效果:

  • 项目1
  • 项目2
  • 项目3
  • 项目4

单独被隐藏的元素


html css
<input type="checkbox" id="is_show" /><!--存储布尔值(是否选中)-->
<ul>
	<li>项目1</li>
	<li class="hide-emlen">项目2</li>
	<li class="hide-emlen">项目3</li>
	<li>项目4</li>
</ul>

<p><label for="is_show" id="show-btn" class="click">显示隐藏元素</label></p>  <!--使用label特性,增加表单元素的点击区域,for绑定隐藏选择元素上.-->
<p class="hide-emlen">单独被隐藏的元素</p>
						
/* 隐藏多选按钮, 隐藏指定元素 */
#is_show, .hide-emlen{
	display: none;
}
/* 显示交互元素 按钮化 */
#show-btn{
	border: solid 1px #000000;
	padding: 5px;
}
/* 多选按钮被选择后, 之后的兄弟或之后子兄弟中查找到交互按钮 */
#is_show:checked ~ #show-btn,
#is_show:checked ~ * #show-btn{
	background-color: #000000;
	color: #FFFFFF;
}

/* 显示隐藏的li - 不污染全局 */
#is_show:checked ~ * li.hide-emlen{
	display: list-item;
}
/* 显示隐藏的p - 不污染全局 */
#is_show:checked ~ p.hide-emlen{
	display: block;
}

/* 因为显示元素时要还原不同的显示方式, 需单独设置. 不建议全局污染. 
 * - 原理
 * css选择器: 当复选框被选中后, 设置兄弟元素的样式.
 */
						

使用隐藏的radioboxes来存储一些CSS布尔值


效果:

点击小图片进行,切换显示大图.

html css
<div id="gallery-container">
	<div class="gallery-item">
		<label for="gallery-item1" class="gallery-label"><img src="../static/img/e_img.png" class="gallery-preview" /></label><!--小图片-->
		<input type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item1" checked="true" /> <!--通过checked默认选中一个-->
		<img src="../static/img/e_img.png" class="gallery-fullsize" /><!--大图片-->
	</div>
	<div class="gallery-item">
		<label for="gallery-item2" class="gallery-label"><img src="../static/img/juz.png" class="gallery-preview" /></label>
		<input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" />
		<img src="../static/img/juz.png" class="gallery-fullsize" />
	</div>
	<div class="gallery-item">
		<label for="gallery-item3" class="gallery-label"><img src="../static/img/mail_img.png" class="gallery-preview" /></label>
		<input type="radio" name="gallery-list" class="gallery-selector" value="3.jpg" id="gallery-item3" />
		<img src="../static/img/mail_img.png" class="gallery-fullsize" />
	</div>
	<div class="gallery-item">
		<label for="gallery-item4" class="gallery-label"><img src="../static/img/somun_img.png" class="gallery-preview" /></label>
		<input type="radio" name="gallery-list" class="gallery-selector" value="4.jpg" id="gallery-item4" />
		<img src="../static/img/somun_img.png" class="gallery-fullsize" />
	</div>
</div>
						
#gallery-container {
	position: relative;
	width: 500px;
	height: auto;
	padding-top: 350px;
	padding-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	border: 1px #aaaaaa solid;
}

img.gallery-preview {
	max-width: 70px;
}

img.gallery-fullsize {
	position: absolute;
	top: 15px;
	left: 50px;
	display: none;
}

div.gallery-item {
	display: inline-block;
}

input.gallery-selector {
	display: none;
}

label.gallery-label {
	cursor: pointer;
}

input.gallery-selector:checked~img.gallery-fullsize {
	display: block;
	width: 60%;
}