本文教大家用原生js实现的最简单选项卡切换效果,鼠标滑过,对应的隐藏部分显示,并且样式发生改变。
代码最简洁,js行为优化版,复制粘贴即可使用。
javascript-实现最简易选项卡 body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{width:450px;margin:10px auto;} #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;} #tabli{float:left;color:#fff;height:30px; cursor:pointer;line-height:30px;list-style-type:none; padding:0 20px;} #tab li.current{color:#000;background:#ddd;} #content{border:1px solid #000;border-top-width:0;} #content ul{line-height:25px; display:none;margin:0 30px;padding:10px 0;}
- 第一课
- 第二课
- 第三课
- 每天一个
- 小应用
- 提升你的
- javascript
- 基础
- 改变网页背景颜色
- 函数传参
- 高重用性函数的编写
- 126邮箱全选效果
- 循环及遍历操作
- 调试器的简单使用
- 典型循环的构成
- for循环配合if判断
- 函数详解:函数构成、调用、事件、传参数
- 定时器的使用:setInterval、setTimeout
- 定时器应用:站长站导航效果
- 定时器应用:自动播放的选项卡
- 定时器应用:数码时钟
- 程序调试方法
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持趣学号。