前端知识—tab切换代码讲解

今天分享下”前端知识—tab切换代码讲解“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 tab切换在新项目中也算得上常见技术性,一般完成tab切换都用js或是jq完成,今日详细介绍二种仅用css完成tab切换方式 :

方式 一:

原理:根据label标签的关系属性和input的单项选择题种类完成相对应div的表明

1.创建一个类名叫wrap的div作为器皿

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

3.在每一个label中创建一个span标签(导航栏內容),input标签(完成选定于撤销选定)type种类为radio,还需要创建一个div做为这一导航栏项被点到是表明內容框,

这儿要特别注意的是input标签的name务必是同样的,我这边取名字叫tab

最后HTML为下边那样:

​​<​​​​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​​​​><​​ http://www.qlyl1688.com/​​>​​

​​<​​​​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的显示

​​<style type=​​​​"text/css"​​​​>​​

​​*{​​​​margin​​​​: ​​​​0​​​​;​​​​padding​​​​: ​​​​0​​​​;}​​

​​.wrap{​​

​​margin​​​​: ​​​​20px​​ ​​auto​​​​;​​

​​width​​​​: ​​​​403px​​​​;​​

​​height​​​​: ​​​​600px​​​​;​​

​​border​​​​:​​​​1px​​ ​​solid​​ ​​brown;​​

​​position​​​​: ​​​​relative​​​​;​​

​​}​​

​​label{​​

​​width​​​​: ​​​​100px​​​​;​​

​​height​​​​: ​​​​30px​​​​;​​

​​float​​​​: ​​​​left​​​​;​​

​​text-align​​​​: ​​​​center​​​​;​​

​​line-height​​​​:​​​​30px​​​​;​​

​​border-right​​​​: ​​​​1px​​ ​​solid​​ ​​brown;​​

​​border-bottom​​​​: ​​​​1px​​ ​​solid​​ ​​brown;​​

​​}​​

​​label:nth-of-type(​​​​4​​​​){​​

​​border-right​​​​: ​​​​none​​​​;​​

​​}​​

​​label span{​​

​​cursor​​​​: ​​​​pointer​​​​;​​

​​}​​

​​label div{​​

​​width​​​​: ​​​​403px​​​​;​​

​​height​​​​: ​​​​568px​​​​;​​

​​position​​​​: ​​​​absolute​​​​;​​

​​left​​​​: ​​​​0​​​​;​​

​​top​​​​: ​​​​31px​​​​;​​

​​background​​​​: ​​​​#eeeeee​​​​;​​

​​display​​​​: ​​​​none​​​​;​​

​​}​​

​​label input{​​

​​width​​​​: ​​​​0​​​​;​​

​​}​​

​​input:checked+div{​​

​​display​​​​: ​​​​block​​​​;​​

​​}​​

​​​​

方法二:

原理:通过a标签的锚点实现切换,也就a的href的路径是要切换div的id

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

2.创建一个类名为nav的div,在里边创建四个a标签,a标签的href分别是要切换到的div的id

3.创建一个和nav兄弟关系的类名为sh的容器用来放置切换的div

4.创建显示内容div,id分别和上面a标签对应

最终代码如下:

14

​​<​​​​div​​ ​​class​​​​=​​​​"wrap"​​​​>​​

​​<​​​​div​​ ​​class​​​​=​​​​"nav"​​​​>​​

​​<​​​​a​​ ​​href​​​​=​​​​"#home"​​​​>home</​​​​a​​​​>​​

​​<​​​​a​​ ​​href​​​​=​​​​"#list"​​​​>list</​​​​a​​​​>​​

​​<​​​​a​​ ​​href​​​​=​​​​"#news"​​​​>news</​​​​a​​​​>​​

​​<​​​​a​​ ​​href​​​​=​​​​"#mine"​​​​>mine</​​​​a​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​ ​​class​​​​=​​​​"sh"​​​​>​​

​​<​​​​div​​ ​​id​​​​=​​​​"home"​​​​>home-page</​​​​div​​​​>​​

​​<​​​​div​​ ​​id​​​​=​​​​"list"​​​​>list-page</​​​​div​​​​>​​

​​<​​​​div​​ ​​id​​​​=​​​​"news"​​​​>news-page</​​​​div​​​​>​​

​​<​​​​div​​ ​​id​​​​=​​​​"mine"​​​​>mine-page</​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​</​​​​div​​​​>​​

css样式设置,即将类名为sh下的div设置为display:none;然后通过div:target{display:block}实现显示选中项

​​<style type=​​​​"text/css"​​​​>​​

​​*{​​​​margin​​​​: ​​​​0​​​​;​​​​padding​​​​: ​​​​0​​​​}​​

​​.wrap{​​

​​width​​​​: ​​​​400px​​​​;​​

​​height​​​​: ​​​​600px​​​​;​​

​​border​​​​: ​​​​1px​​ ​​solid​​ ​​brown;​​

​​margin​​​​: ​​​​20px​​ ​​auto​​​​;​​

​​position​​​​: ​​​​relative​​​​;​​

​​}​​

​​.nav{​​

​​width​​​​: ​​​​100%​​​​;​​

​​height​​​​: ​​​​30px​​​​;​​

​​}​​

​​.nav a{​​

​​width​​​​: ​​​​99px​​​​;​​

​​height​​​​: ​​​​30px​​​​;​​

​​text-align​​​​: ​​​​center​​​​;​​

​​line-height​​​​: ​​​​30px​​​​;​​

​​border-right​​​​: ​​​​1px​​ ​​solid​​ ​​brown;​​

​​border-bottom​​​​: ​​​​1px​​ ​​solid​​ ​​brown;​​

​​float​​​​: ​​​​left​​​​;​​

​​text-decoration​​​​: ​​​​none​​​​;​​

​​color​​​​:​​​​black​​​​;​​

​​}​​

​​.sh{​​

​​width​​​​: ​​​​400px​​​​;​​

​​height​​​​: ​​​​569px​​​​;​​

​​position​​​​: ​​​​absolute​​​​;​​

​​left​​​​: ​​​​0​​​​;​​

​​top​​​​:​​​​31px​​​​;​​

​​background​​​​: ​​​​#eeeeee​​​​;​​

​​}​​

​​.sh div{​​

​​display​​​​: ​​​​none​​​​;​​

​​text-align​​​​: ​​​​center​​​​;​​

​​}​​

​​.sh div:target{​​

​​display​​​​: ​​​​block​​​​;​​

​​}​​

​​​​

今天的文章就分享到这啦,内容转自脚本之家,下篇文章再见

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值