<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>几行简单的jQuery代码搞定tab标签切换效果</title>
<style>
*{ margin:0padding:0list-style: none}
body {font:12px/1.5 Tahoma}
#outer {width:450pxmargin:150px auto}
#tab {overflow:hiddenzoom:1background:#000border:1px solid #000}
#tab li {float:leftcolor:#fffheight:30px cursor:pointer line-height:30pxpadding:0 20px}
#tab li.current {color:#000background:#ccc}
#content {border:1px solid #000border-top-width:0}
#content ul {line-height:25pxdisplay:none margin:0 30pxpadding:10px 0}
</style>
</head>
<body>
<!-- html代码begin -->
<div id="outer">
<ul id="tab">
<li class="current">tab标签</li>
<li>qq在线客服代码</li>
<li>css3</li>
</ul>
<div id="content">
<ul style="display:block">
<a href="http://www.lanrenzhijia.com/tab">tab标签</a>
</ul>
<ul>
<a href="http://www.lanrenzhijia.com/service">qq在线客服代码</a>
</ul>
<ul>
<a href="http://www.lanrenzhijia.com/js/css3">css3</a>
</ul>
</div>
</div>
<!-- html代码end -->
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
$(function(){
window.onload = function()
{
var $li = $('#tab li')
var $ul = $('#content ul')
$li.mouseover(function(){
var $this = $(this)
var $t = $this.index()
$li.removeClass()
$this.addClass('current')
$ul.css('display','none')
$ul.eq($t).css('display','block')
})
}
})
</script>
</body>
</html>
你现在的水平，还是处于入门级别的，企业是不会要的。现在市场需要的是专业的开发工程师，不是基本的入门工程师。所以你要了解目前专业的开发工程师的技术要求才行。
首先，成为一名成熟的开发者，首先必是一位有基础的开发。
所以最基本的一些HTML、CSS、JavaScript这些基础的语法，就不详细说了。
扎实的JavaScript基础在前端开发里，最讲究的还是在JS里，基础的语法，能运用很简单。
但是说成熟开发，那必然是对JavaScript是熟练掌握和有深入的理解了。说到要熟练掌握JavaScript，那必然是要掌握闭包，ES678,原型链，这一系列的了。你说你JS还行，那就基本企业就看不上了
除了扎实的JS基础，还有就是要掌握符合目前市场需求的技术点了。
多终端开发除了基础的PC端，目前移动端可以说是非常火的了。
比PC端单一的网页不同，在移动端的技术可以应用到WEB-APP,小程序，Hybrid-App等等。
WEBapp，也就是我们常见的浏览器（以及内置浏览器，比如微信）打开的大型移动端网页。比如我们常见的电商网站，功能性网站，管理网站，在布局和功能上都有APP的效果。
做好WEB-APP开发，最基本的很多人肯定会说响应式布局，但是前端开发是又5种布局法的，除了出名的响应式，还有在移动端最重要的弹性布局法，也就是很多人头疼的rem布局。
除了布局方法之外，在H5新特性和触屏事件和设备兼容性问题也是需要信手拈来。
小程序，这个也不用多说，现在可以说是非常火的，各大平台都有在做自己的小程序，各种砍价，抢票，电商，游戏都有运用。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是ES语法。小程序目前很多公司都是招聘前端开发，目前还没有独立的小程序开发工程师，所以小程序可以说是前端工程师高薪就业的加分技能，换句话说就是成熟开发必备了。
Hybrid-App，又称混合式APP，可能听说的人很少，但是18年是越来越多人去开发了，这种是能直接产出下载到终端的APP的，在体验感上可以说已经具备传统APP的大部分功能了。这种开发门槛较低，也就是前端开发就可以完成。多数都是大包平台就能做，这个你可以后面了解一下。
前端主流技术框架前面的都是基础东西，现在去就业前端开发，不是只靠个基础东西，搞个移动端页面就可以算成熟了。前端3大框架，VUE、Angular、React这3个可以说是现在非常火热的了。
基础语法都可以写的前端，为什么还要框架？
很多小白朋友是不懂什么是框架的，只听过jQuery这些东西，以为就是框架。或者认为框架就是加速开发，觉得这些库、插件就能完成框架的工作了。
其实框架的出现，是改变前端地位的重要标志。最重要的表现，就是前后端分离，在前后端分离之前，很多后端开发都是又当爹又当妈的，效果不好效率也不高，我就是在后端出身，深知痛苦。
现在的前端项目，比以前是更加复杂化、多样化了。项目复杂了，问题也多了。
那框架到底解决了什么问题？
解决重复引用外部js，以用jQuery开发为例，很多时候都是不能单一完成一个项目的，还需要引用很多的第三方插件和库，导致会一个项目引入很多外部JS文件。
这样不仅让代码变得杂乱，而且很影响打开速度。但是用框架呢，以VUE为例，一般会和构建工具配合，然后就是一个入口文件就可以完成了，在运行时候就在入口引入一次，一劳永逸。
使用组件化开发，组件是前端框架里非常强大的功能之一，它可以扩展你的HTML，封装可以重用的代码块，比如你的轮播图、tab切换、页面头部、页面底部等等。
这种独立的组件具有了结构（html），表现（css）和行为（js）完整的功能，很大程度的节省了代码量，提高了代码的复用性。特别是团队合作的时候，可以很好的提高使用效率。
减少开发周期，如果你觉得jQuery可以减少开发周期了，那其实框架可以比库更快。比如说使用jQuery开发的时候，很多时候是需要频繁去操作DOM，每次效果都要去查找DOM，这样就显得很繁琐了。使用框架的时候，很多功能都得到了封装，比如说很多指令都有数据绑定，数据格式化这些功能。这样更多时候，我们开发的时候只需要关注数据的逻辑就行了。
没有真正的成熟你会提出成熟，是因为想给自己一个标准，但是做技术工作，最重要还是市场的标准。
前端技术是日新月异的，基本每年都是会有新的概念，新的架构，新的应用产品，新的交互体检。这些都是有不确定性的。
做技术没有真正的成熟可言，更多的还是不断学习，持续进步。
把技术不断做到专，做到精，才能在当前时代成为“成熟”。
HTML：是静态网页，该文档本身只有页面结构，可以显示页面内容；CSS：层叠样式表，通过设置对应的样式属性可以修改html文档内各元素的显示、位置等样式；如修改颜色、字体、字号、宽高、位置、背景等。Javascript：动态脚本语言，广泛应用于web应用的功能开发以及丰富页面体验，可以动态控制页面内容；如修改页面文字、图片、各种效果、功能等；一个通俗的例子：HTML就像人的身体，CSS就像人的衣服，Javascript就像人的思想和行为。
