:target效果1

此效果按照tabs的标题包裹在同一个标签中,然后用另一个标签包裹content,达到的效果没有高亮显示,在这只是说明下

学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。

积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。

吾尝终日而思矣,不如须臾之所学也;吾尝跂而望矣,不如登高之博见也。登高而招,臂非加长也,而见者远;顺风而呼,声非加疾也,而闻者彰。假舆马者,非利足也,而致千里;假舟楫者,非能水也,而绝江河。

css code

#tabs1{
	position:relative;
}
#tabs1 .tabs-title{
	border-bottom:1px solid #ccc;
	background-color:#fff;
	position:absolute;
	width:100%;
	z-index:10;
}
#tabs1 .tabs-title a{
	background-color:#f4f4f4;
	padding:5px 10px;
	border:1px solid #ccc;
}
#tabs1 .tabs-title li{
	line-height:25px;
	margin-right:5px;
}
#tabs1 .box-wrap{
	border:1px solid #ccc;
	border-top:none;
	height:145px;
	overflow:hidden;
	clear:both;
}
#tabs1 .box-wrap div{
	height:100px;
	padding:35px 10px 10px 10px;
}
#tabs1 .box-wrap div:target ~ div{
	display:none;
}
#tabs1 .box-wrap div:target{
	display:block;
}

:target效果2

这个效果具有高亮显示,但是我们的html结构却是按照那种accordion的结构写,也就是一个title接一个content,然后title采用浮动在一条线上,而对content进行绝对定位放在一起,然后通过target来控制content的z-index,所以如果按照这种的html结构那个radio和checkbox也是同样可以应用在tabs上面的

Tab 1

学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。

Tab 2

积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。

Tab 3

吾尝终日而思矣,不如须臾之所学也;吾尝跂而望矣,不如登高之博见也。登高而招,臂非加长也,而见者远;顺风而呼,声非加疾也,而闻者彰。假舆马者,非利足也,而致千里;假舟楫者,非能水也,而绝江河。

css code

#tabs2{
	position:relative;
	height:142px;
	overflow:hidden;
}
#tabs2 .tabs-title{
	background-color: #F4F4F4;
    border: 1px solid #CCCCCC;
    padding: 5px 10px;
	font-size:12px;
	line-height:1.5;
	z-index:9;
	float:left;
	margin-left:-1px;
}
#tabs2 .box1{
	margin-left:0;
}
#tabs2 .tabs-content{
	padding:10px 10px 0;
	border: 1px solid #CCCCCC;
	height:101px;
	background-color:#fff;
	position:absolute;
	left:0;
	top:29px;
	z-index:-2;
}
#tabs2 :target .tabs-content{
	z-index:-1;
}
#tabs2 :target .tabs-title{
	background-color:#fff;
	border-bottom:1px solid #fff;
	color:#f00;
}

既然是用:target来实现的,那必须不兼容浏览器啊,这里主要是对:target进行实例化,更深刻的理解这个选择器,当然其实tabs是可以用纯css做的,但是那个和css3无关呵呵,这里不做介绍,感兴趣的话可以百度或谷歌下

小小赞助大大帮助

如果您觉得本文的内容对您的学习有所帮助:

支付鼓励

轻轻一点,是您对我的支持