JavaScript实现Tab选项卡特效代码总结

最新推荐文章于 2023-12-05 16:17:20 发布

WionWan

最新推荐文章于 2023-12-05 16:17:20 发布

阅读量712

点赞数

分类专栏： JavaScript 文章标签： Tab选项卡 JavaScript 网页特效 CSS

本文链接：https://blog.csdn.net/u012036171/article/details/44070157

版权

今天在慕课网上做了Tab选项卡的特效，刚开始写不太顺手，CSS写出来效果都不太理想，后来参考了别人的思路，自己修改了一下，终于有了最终效果。下面是正确的源码。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JavaScript特效-Tab选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */  
     *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
     ul{list-style-type: none;}
     a{text-decoration: none;}

     #tab-list{width: 275px;height:190px;margin: 20px auto;}

     #ul1{border-bottom: 2px solid #8B4513;height: 32px;}
     #ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
     #ul1 li:hover{cursor: pointer;}
     #ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}

     #tab-list div{border: 1px solid #7396B8;border-top: none;}
     #tab-lis

最低0.47元/天解锁文章

WionWan

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现Tab选项卡特效代码总结

今天在慕课网上做了Tab选项卡的特效，刚开始写不太顺手，CSS写出来效果都不太理想，后来参考了别人的思路，自己修改了一下，终于有了最终效果。下面是正确的源码。 JavaScript特效-Tab选项卡 /* CSS样式制作 */ *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#0000
复制链接

扫一扫

专栏目录