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

冬天地上扑的是雪,厚厚的,软软的;房上落的是雪,白皑皑的,又松又软;树上盖的是雪,积雪把树枝压弯了腰。太阳照在雪山上,发出耀眼的光芒。
复制代码
代码如下:

#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 rel="nofollow noopener noreferrer" href="#01">标签1</a></li>
<li><a rel="nofollow noopener noreferrer" 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>

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

以上就是tab选项卡布局之如何利用a的一个选项形式。最完美的状态就是,看过了世界的黑暗与痛苦,却依然坚信它的单纯与完美。期望那时候,咱们都变成了更好的自我。没有早一步,也没有晚一步的,就在那时候,遇到你。更多关于tab选项卡布局之如何利用a的一个选项形式请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
如何利用纯CSS3如何实现tab选项卡切换示例代码

如何使用CSS3如何实现选项卡切换的方法

CSS文章列表切换选项卡效果实例

一款纯css3如何实现的tab选项卡的实列好代码教程

如何使用css3如何实现的tab选项卡代码分享