tab选项卡布局之利用a的一个选项形式

ttx9n

很多的选项卡都是用JS去完成的 这个效果也是之前在经典论坛看到别人使用的，很有想法记录下来
复制代码代码如下:
#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>

这样就完成了一个选项卡的功能了
思路很新颖，值得好好思考。

5ble0ks

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

nwk53kbd

dfdsafdsfdsfdsf

qq303604905

8888888888888888

btbhs8t

大家都不容易！

qzdhcgs

啪啪啪生怕PSP怕

小伙伴

挺不错的东西

lsc54

天天源码社区www.tiantianym.com

4k0mp7m

看到这帖子真是高兴！

回复用户5

那三门，你们谁寂寞才快乐撒