前端基本技能Tab选项卡

原创 houjinlong 随笔 js 599阅读 2017-05-22 16:52:59 举报

js

通过js每次事件先给所有的btn和tab面板初始化,给点击的btn加active并让对应的tab面板显示
基本原理:tab效果用js实现基本都一个思路,先让所有都初始化,再让要显示的出来
html 代码

纯css

通过单选按钮(radio)+label+css选择器(~)+元素状态伪类checked
基本原理:通过label模拟btn,label的特性使得被点击后会使相应的隐藏input被选中,然后我
们通过它被选中反馈给label以及响应的input,因为input标签是radio加相同name使得永远只能有一组显示
html 代码

jq一行实现

瞎玩,一行有局限,得结构按规矩写ლ(╹ε╹ლ) 一般写2行比较好
基本原理:和js一样,但jq的遍历强大所以实现更方便
html 代码

一个仿汽车之家选项卡的小demo

重点来了

[blockquote]eval();新用法,莫名今天脑袋特灵光ლ(╹ε╹ლ) ლ(╹ε╹ლ) ლ(╹ε╹ლ) ლ(╹ε╹ლ) 
写点击和鼠标移到tab效果用一块js而且不想用if-else所一想起了eval();各种尝试竟然成功了
不知道有没有人这样写过,反正我是没见过!所以原创原创,必须原创~( ̄▽ ̄)~( ̄▽ ̄)~爽到不行~
以下是代码[/blockquote]
javascript 代码

评论 ( 2 )
最新评论
houjinlong 1F 2017-05-22 18:58:50 2F

写一半没写完 ,有点事,谢谢你的关注

rolitter 2017-05-22 17:22:23 1F

为什么不进行css初始化?