极客学院 JS学习记录

2015-1-7 chenmo 网页设计

以前只会些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>

 

标签: 慕课网 TAB标签 极客 学院 Jqurey 特效

« 响应式设计的现状与趋势 | 2015年，网站设计十大趋势»
Powered by emlog 湘ICP备13007859号 空间由景安网络赞助