以前只会些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>
评论 (0)