由于需要,想要一种不需使用JS的div内容切换效果,当鼠标经过不同的选项卡时,下面固定的区域显示不同的内容。网上找到不少JS+CSS内页内容切换选项卡的内容,但这并不是我想要的纯CSS的内页切换选项卡。于是,只能自己想办法实现这个效果了,经过努力,也就有了下面这个纯CSS内页内容切换选项卡,完全是由DIV+CSS代码实现,可以根据需要进行修改、添加内页选项卡。由于没有使用JS,所以当选项卡多时,CSS代码就会很多。

CSS:
body{font-size:14px;line-height:180%; margin:1px auto; width:910px;}
 
#ibloglife #divlink1,
#ibloglife #divlink2,
#ibloglife #divlink3,
#ibloglife #divlink4{width:100px;display:inline;float:left; height:30px;text-align:center;}
 
#ibloglife #divlink1:hover,
#ibloglife #divlink2:hover,
#ibloglife #divlink3:hover,
#ibloglife #divlink4:hover{background-color:#CCCCCC;}
 
#divcon1{position:static;width:600px;z-index:1;visibility:visible;margin-top:-3px; border:#333333 1px solid;}
#divcon2,
#divcon3,
#divcon4{position:static;width:600px;z-index:1;visibility:hidden;margin-top:-3px;border:#333333 1px solid;}
 
#ibloglife #divlink1:hover #divcon1{visibility:visible;margin-left:none;border:#ff0000 1px solid;background-color:#CCCCCC;}
#ibloglife #divlink1:hover #divcon2,
#ibloglife #divlink1:hover #divcon3,
#ibloglife #divlink1:hover #divcon4{visibility:hidden;}
 
#ibloglife #divlink2:hover #divcon2{visibility:visible;margin-left:-100px;border:#ff0000 1px solid;background-color:#CCCCCC;}
#ibloglife #divlink2:hover #divcon1,
#ibloglife #divlink2:hover #divcon3,
#ibloglife #divlink2:hover #divcon4{visibility:hidden;}
 
#ibloglife #divlink3:hover #divcon3{visibility:visible;margin-left:-200px;border:#ff0000 1px solid;background-color:#CCCCCC;}
#ibloglife #divlink3:hover #divcon1,
#ibloglife #divlink3:hover #divcon2,
#ibloglife #divlink3:hover #divcon4{visibility:hidden;}
 
#ibloglife #divlink4:hover #divcon4{visibility:visible;margin-left:-300px;border:#ff0000 1px solid;background-color:#CCCCCC;}
#ibloglife #divlink4:hover #divcon1,
#ibloglife #divlink4:hover #divcon2,
#ibloglife #divlink4:hover #divcon3{visibility:hidden;}

HTML:

<div id="ibloglife">
 <div id="divlink1">divlink1<br />
  <div id="divcon1">divcon1</div>
 </div>
 <div id="divlink2">divlink2<br />
  <div id="divcon2">divcon2</div>
 </div>
 <div id="divlink3">divlink3<br />
  <div id="divcon3">divcon3</div>
 </div>
 <div id="divlink4">divlink4<br />
  <div id="divcon4">divcon4</div>
 </div>
</div>


© 活着的博客 - 李权辉的个人博客:人,终究是生活在现实之中,是为了活着而生活.