1.介绍
自从接触了javascript这款语言，我就深深为之着迷，那种灵动性让我一度喜爱，而它的轻量级的库jquery就可以说更加神奇了。为此这几天写了一个觉得很漂亮的小特效，分享一下。
2.html 分析
<div class="content">
<ul class="content-nav">
<li class="ac"><a href="#">最新资讯</a>
<div></div>
</li>
<li><a href="#">篮球</a>
<div></div>
</li>
<li><a href="#">潮流</a>
<div></div>
</li>
</ul>
<div class="content-list-one xianshi">
<div>
<img src="img/4.jpg" width="500" height="200">
</div>
</div>
<div class="content-list-one ">
本文主要介绍留言板系统的设计思路和制作过程，从留言板的重要性开始，介绍我的留言版采用的PHP技术和MYSQL数据库，进而阐述整技术。
</div>
<div class="content-list-one ">
留言板是一种电子便签管理系统，是用PHP或其它脚本语言编写的网络应用程序。在网络用户交流中起很大的作用，每个人都可以将他
</div>
</div>
3.Css 分析
一个网页特效，基础所在就是html布局，和css配合 html相信学前端的小伙伴们，上面的代码应该不难看懂。我就不细说了。我主要讲讲css技巧。
css技巧
页面有两个部分，一个导航 和 需要切换的内容区域这里面，我把内容区域用position:absolute;这个属性定在一个点上。当然他的父级需要加相对定位，要不然他默认就是body是父级了。所以你写了top,和left值时候 就不会顺心如意。
利用css3 我们可以做一个非常棒的三角形，但并代表说图片做出的三角形就会被淘汰，要知道有一种东西叫做低版本浏览器，当然我们有嘲讽的意思。=。=！
不过三角形也需要绝对定位到每一个li上面，当然此时li就是他的父级，这里我用div做的三角形。
代码里面第一个li添加ac类什么用呢？
其实这就是默认方式的一个技巧，我在写个小东西的时候遇到了一个问题，思路想错了，我想加上li的ac 再给它的子div（三角形）加 默认class 其他的子div（三角形）隐藏，移动这个class，其他子div（三角形）隐藏。
这么想也没错，但是还是在移动小三角形出了点小问题。o.0 所以我就想到了一个棒棒的方法。
我并没有给任何一个子div加类，而移动的只有li上的ac让所有的li的子div（三角形）隐藏，让li上带有ac类的子div（三角形）显示，好啦说了这么多了，我要上代码了！
<style>
*{ padding:0; margin:0; list-style:none;}
.content-nav{ width:500px; height:30px; background:rgba(0,0,0,0.2); margin: 20px auto; clear:both;}
.content-nav li{ float:left; margin-right:20px; width:100px; height:30px; text-align:center; line-height:30px; position:relative;}
.content-nav li a{ color:#FFF; display:block; text-decoration:none;}
.content-list-one{ width:500px; height:200px; background:#FF0; margin:0 auto; position:absolute; top:50px; left:430px; display:none;}
.content{ position:relative;}
.xianshi{ display: block;}
.content-nav li.ac{ background:#000; color:#fffffff; }
.content-nav li div{ display:none;}
.content-nav li.ac div{ width:0; height:0; position:absolute; right:50px; top:30px; border-left:6px solid transparent;
border-right:6px solid transparent; border-top:6px solid #000; cursor:pointer; display:block;}
</style>
3.Jquery 分析
其实jquery还真的特别方便，也许用javascript写很长的代码，用jquery几句话就ok啦~ 不过我个人认为两种方式都有好有坏，原生的东西运行的速度要比用jquery要快一些，当然这种速度之间的差距，还是很小的。。。
+_+ 咱们继续刚才的正题
html css写好了，那么jquery怎么写呢？ 首先我们要点击当前的 li显示下面的内容，比如，点击第一个li 就要显示第一页内容，第二个li就显示第二页内容 那么好，我们要先写导航切换，然后在索引下面的内容。
需要用到的方法有，click() addClass() removeClass() siblings() find()
fadeIn() fadeOut() index() eq()
谁点击呢？ 当然是li 喽，不过命名还是要规范点好 两种比较喜欢的形式
$(".父级类名 li").click(function(){
代码
//$(this).addClass("ac").siblings("li").removeClass("ac");
})
$(".父级类名 ").find("li").click(function(){
//$(this).addClass("ac").siblings("li").removeClass("ac");
})
上面那些方法，分别是点击方法，添加类名方法，移除类名方法，筛选同胞元素，（也就是同层元素）...从那找到的方法，淡入方法，淡出方法 索引方法 , 选取的方法。
不是很难，如果还是不懂可能需要自行查查手册，看看w3c了
好，上面就是导航条如何切换了，给当前点击li添加ac类，然后筛选出（“li”）的这种同胞元素，移除掉他们身上的ac类。
那么如何控制下面的内容呢？
这就需要我们的索引了， 索引怎么说，通俗点理解。就是一致，第一个li对应的就是第一个内容div 。
可能还是有点混吧， 第一个li的第一个索引是0，第一个div索引也是0， 他们相等就可以完成切换了。。
有些时候语言不能完美的阐述我要说的东西，还是代码来的更加有说服力
<script>
$(function(){
$(".content-nav li").click(function(){
$(this).addClass("ac").siblings("li").removeClass("ac");
var index=$(this).index();
$(".content-list-one").eq(index).addClass("xianshi").siblings("div").removeClass("xianshi");
//$(".content-list-one").eq(index).fadeIn().siblings("div").fadeOut();
})
});
</script>
结束语
好啦，以上就是我为大家带来的一个小案例，案例虽然小，不过我也希望能帮助到你们，再次多谢观看~~~~以后见
