#Tab{width:300px;line-height:30px;overflow:hidden;}

#Tab li{float:left;width:100px;line-height:30px;text-align:center;cursor:pointer;}

#Main{width:300px;height:300px;overflow:hidden;border:1px solid #000;}

#Main ul{height:300px;}

#Main ul li{height:30px;line-height:30px;}

利用了a的功能，把Main的超出部分隐藏

html

<div id="Tab">

<ul>

<li><a href="#01">标签1</a></li>

<li><a href="#02">标签2</a></li>

</ul>

</div>

<div id="Main">

<ul id="01">

<li>1111111</li>

<li>1111111</li>

<li>1111111</li>

<li>1111111</li>

<li>1111111</li>

<li>1111111</li>

<li>1111111</li>

<li>1111111</li>

<li>1111111</li>

<li>1111111</li>

</ul>

<ul id="02">

<li>2222222</li>

<li>2222222</li>

<li>2222222</li>

<li>2222222</li>

<li>2222222</li>

<li>2222222</li>

<li>2222222</li>

<li>2222222</li>

<li>2222222</li>

<li>2222222</li>

</ul>

</div>

这样就完成了一个选项卡的功能了

思路很新颖，值得好好思考。