css jquery 选项卡,一款 jquery + css3 三角形简单选项卡

1.介绍

自从接触了javascript这款语言，我就深深为之着迷，那种灵动性让我一度喜爱，而它的轻量级的库jquery就可以说更加神奇了。为此这几天写了一个觉得很漂亮的小特效，分享一下。

2.html 分析

• 最新资讯
• 篮球
• 潮流

本文主要介绍留言板系统的设计思路和制作过程，从留言板的重要性开始，介绍我的留言版采用的PHP技术和MYSQL数据库，进而阐述整技术。

留言板是一种电子便签管理系统，是用PHP或其它脚本语言编写的网络应用程序。在网络用户交流中起很大的作用，每个人都可以将他

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(三角形)显示，好啦说了这么多了，我要上代码了！

*{ 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;}

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， 他们相等就可以完成切换了。。

有些时候语言不能完美的阐述我要说的东西，还是代码来的更加有说服力

$(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();

})

});

结束语

好啦，以上就是我为大家带来的一个小案例，案例虽然小，不过我也希望能帮助到你们，再次多谢观看~~~~以后见