首页 极客学院 JS学习记录

极客学院 JS学习记录

chenmo 2015-1-7 0 1484

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

免责声明:本文仅代表作者个人观点,与本网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
作者: chenmo 本文最后编辑于2015-1-7 04:44:30
chenmo

一个爱玩电脑,却又不沉迷游戏;喜欢网页设计,却又能力不足。喜欢网上到处灌,关注科技类新闻,寻搜有价值的网站。喜欢美剧,又喜爱电影,可以很宅,很宅,却又爱好户外骑行运动,喜欢接近大自然的心声。

作者的微博

发表评论: