就是html中tab滑动布局图片的完整CSS代码，要简单点儿！

html-css024

就是html中tab滑动布局图片的完整CSS代码，要简单点儿！,第1张

<ul> <li><a href="#test1">test1</a></li> <li><a href="#test2">test2</a></li> </ul> <div id="test1" class="txt1">111111111111111</div> <div id="test2" class="txt1">222222222222222</div>

.txt1 {border: 1px green solid padding: 10px background: #fafafa height: 50pxwidth: 600px position: absolute} 这里将内容叠加起来。只显示最上面的。不加背景的话，字体就重叠在一起#test1:target,#test2:target {z-index: 1} 这是当a标签的href触发到id伪test1的target后 的动画 然后将该页显示出来。

需要再加上JS进入控制。具体代码如下，JS的功能就是用来修改CSS中的display属性。下面的代码只是做一些简单的原理演示，你可以跟据你自己的需要进行修改。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style>

.tabnav ul{margin:0padding:0list-style:none}

.tabnav li{padding:5 10pxborder:1px solid redfloat:left}

.tabid {border:1px solid #000clear:both}

</style>

<script language='javascript'>

function tab(n){

var tabnav="tab"+n

var tabid="tabid"+n

cleardisplay()

document.getElementById(tabid).style.display="block"

}

function cleardisplay(){

for (i=1i<3i++)

{

var cleartabid="tabid"+i

document.getElementById(cleartabid).style.display="none"

}

}

</script>

</HEAD>

<BODY>

<div>

<div class='tabnav'>

<ul>

<li id='tab1' onclick='tab(1)'>TAB1</li>

<li id='tab2' onclick='tab(2)'>TAB2</li>

</ul>

</div>

<div id='tabid1' class='tabid'>tab1</div>

<div id='tabid2' class='tabid' style='display:none'>tab2</div>

</div>

</BODY>

</HTML>