极客学院 JS学习记录
以前只会些HTML,想学JS不知道从哪入门,最近一直在看极客学院的HTML5视频,终于对JS有点认识了。推荐大家看看:
http://www.jikexueyuan.com/path/html5/
不过它需要购买会员,验证邮箱和手机后,可体验5天免费VIP,我就这样看了几天,感觉很不错。可以配合上个月我发现的慕课网(纯免费),学习特有效果。 在极客标签上所以前收藏的TAB标签效果拿出来学习学习下,关键代码如下:
网址:https://cmsblog.cn/pp/tab.html
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script> <style>*{margin:0px;padding:0px; } .tab{width:600px;border:1px solid #ccc; margin:5px; } .tab ul.menu{height:40px; margin:0px; background:#f6f6f6;width:600px; } .tab ul.menu li{float:left;text-align:center;width:100px;height:38px;line-height:38px;list-style:none; border-right:1px solid #ccc;cursor:pointer;} .tab ul.menu li.active{background:#e1e1e1;color:#333; border-right:1px solid #ccc;} .tabc1,.tabc2,.tabc3,.tabc4{height:190px;border-top:1px solid #ccc;margin-top:-2px; padding:5px; } .tabc2,.tabc3,.tabc4{display:none;}</style> <body> <script>$(function () { $('.tab ul.menu li').click(function () { var Index = $(this).index(); objnb = Index; $(this).addClass('active').siblings().removeClass('active'); $('.tab').children('div').eq(Index).show().siblings('div').hide(); }); });</script><div class="tab"> <ul class="menu" > <li class="active">tab1</li> <li>tab2</li> <li>tab3</li> <li>tab4</li> </ul> <div class="tabc1">1</div> <div class="tabc2">2</div> <div class="tabc3">3</div> <div class="tabc4">4</div> </div> <p>把click事件改成mouseover事件,可变成鼠标移到上面就显示</P>
最新日志
最新碎语
- 此生不悔入华夏,来世还做中国人!
2019-09-30 21:39
- 物来顺应,未来不迎,当事不杂,季过不恋.
2019-08-14 22:36
- 砍柴的和放牛的聊天,聊到最后,人家牛吃饱了,你柴嗝屁了.
2019-06-19 16:51
- 抖音寻夫若为真,我愿剃度永为僧
2019-06-02 00:27
- 如果已婚,请穿好你的衣服,这是对你丈夫的尊重,如果未婚,也穿好衣服,这是对你自己的尊重,如果是出来卖的,请说明价格和服务,这是对消费者的尊重,如果不卖只是为了博眼球,请你再穿少一点,我看的不够清楚。
2019-04-25 08:52