html实现选项卡页面切换的方法

　　介绍

小编给大家分享一下html实现选项卡页面切换的方法,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

html实现选项卡页面切换的方法:首先创建一个类名为包装的div当作容器,然后创建四个标签标签,在每一个标签中创建一个跨度标签;最后创建一个div作为这个导航项。

<强> html实现选项卡页面切换的方法:

原理:通过标签标签的关联属性和输入的单选类型实现相应div的显示

1,创建一个类名为包装的div当作容器

2,创建四个标签标签,这将作为选项卡切换项

3,在每一个标签中创建一个跨度标签(导航内容),输入标签(实现选中于取消选中)类型类型为广播,还要创建一个div作为这个导航项被点中是显示内容框,

这里要注意的是输入标签的名字必须是相同的,我这边取名叫标签

最终html为下面这样:

& lt; div 类=皐rap"比; 　　,,,& lt; label> 　　,,,,,,,& lt; span> home 　　,,,,,,,& lt; input 类型=皉adio", name=皌ab", checked> 　　,,,,,,,& lt; div> home-page
　　,,,& lt;/label> 　　,,,& lt; label> 　　,,,,,,,& lt; span> list 　　,,,,,,,& lt; input 类型=皉adio", name=皌ab"比; 　　,,,,,,,& lt; div> list-page
　　,,,& lt;/label> 　　,,,& lt; label> 　　,,,,,,,& lt; span> news 　　,,,,,,,& lt; input 类型=皉adio", name=皌ab"比; 　　,,,,,,,& lt; div> news-page