html如何实现tab页面切换


本文摘自PHP中文网,作者coldplay.xixi,侵删。

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

本教程操作环境:windows7系统、html5版,DELL G3电脑。

html实现tab页面切换的方法:

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

1、创建一个类名为wrap的div当作容器

2、创建四个label标签,这将作为tab切换项

3、在每一个label中创建一个span标签(导航内容),input标签(实现选中于取消选中)type类型为radio,还要创建一个div作为这个导航项被点中是显示内容框,

这里要注意的是input标签的name必须是相同的,我这边取名叫tab

最终HTML为下面这样:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<div class="wrap">

    <label>

        <span>home</span>

        <input type="radio" name="tab" checked>

        <div>home-page</div>

    </label>

    <label>

        <span>list</span>

        <input type="radio" name="tab">

        <div>list-page</div>

    </label>

    <label>

        <span>news</span>

        <input type="radio" name="tab">

        <div>news-page</div>

    </label>

    <label>

        <span>mine</span>

        <input type="radio" name="tab">

        <div>mine-page</div>

    </label>

</div>

重要的css,通过将input的width设为0使得input的那个小圆点不现实,又通过label的关联用导航项的点击实现input的checked,然后通过input:checked+div{display:block}实现相应div的显示

阅读剩余部分

相关阅读 >>

Html的区块元素

Html代码如何让照片变模糊

Html怎么定位

如何判断Html中文本框内容是否为空

Html中id和class属性之间的区别是什么?

Html如何使用不换行标签

Html怎么导入图片

Html怎么设置透明度

(超好用)Html 颜色选择器的用法

Html object 元素使用教程

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...