Mr.Xiong使用jQuery始兴县tab选项卡的效果

使用jQuery实现tab选项卡的效果

开始吧，还是老样子，先看看布完局和设置完样式后的样子

1. 我们先来布局：先放一个div标签，再给div标签一个类为box，接在再在div标签中放入两个div标签并分别给div添加类为box1、box2，box1这个div是用来装标题，而box2这个div是用来装内容的，然后在box1中放入三个span标签并且分别给span标签添加属性index=1、index=2、index=3，内容方分别为教育、培训、出国，另外还需要给文本为教育的span标签添加类为on
2. 除此之外还需要在box1中添加两个a标签，并且给两个a标签添加类和ID，添加的类和ID分别为prev、next和a1、a2，这样就完成了box1
3. 接下来我们再去完成box2，需要在box2中添加三个div标签，这三个div标签都是用来装内容的，每个div标签内都有七个p标签来包裹七条文本内容，然后再给第一个div标签添加类为oo，我们就完成了页面整个的布局
4. 接下来就是去给标签设置样式，我们需要给最大的div以及类为box1和box2的div设置盒子的大小、行高、文本居中、背景颜色等，还需要给最大的盒子设置边框和相对定位就差不多了，接着主要去给类为prev、next和oo进行设置样式，prev和next就是右侧的两个向左和向右的三角形，就需要设置边框的大小以及透明度，然后再让其一个角为某种颜色即可，然后再给他设置绝对定位，再通过top和left进行调整位置
5. 还差一个类为oo的，需要给他设置宽度、高度以及让他变为块级化，同样需要给他设置绝对定位，以及背景还有box-sizing属性，属性值为border-box作用是固定盒子的大小
6. 接下来就去写jQuery实现效果

                                                                                  第一部分代码                                                                                                                                    第二部分代码

首先声明一个变量ind再把1赋值给他，接着再去创建一个函数为x（），再声明一个变量为spans并将通过类获取到这个类里面的所有span标签赋值给他，接着再循环遍历一下span标签可以用for（）循环或者用$.each（）都是一样的作用，但是后者需要两个参数，一个数需要循环的东西，另一个就是回调函数，回调函数中也需要两个参数，一个是属性另一个为值，接着再声明一个变量span来接收hasClass（）这个方法，目的是判断某个span标签上是否有on这个类，如果有就让变量span为true，并且把on这个类移除掉，然后再循环外让下一个span标签的类为on，我们设置on这个类的样式就是让标题有一个高亮的效果

1. 接着我们再创建一个函数为j（），这个函数和x（）函数一样，通过类把这个类里面所有的div标签获取到，并把它赋值给声明的变量divs，接下来的步骤是一样的我就省略了
2. 两个方法已经写完了，我们就去页面加载事件中写了，需要通过ID把那两个三角形按钮获取到，并且再绑定点击事件，再通过if语句判断ind == 1，如果是就让ind == 3，否则ind--，然后再把x()和j()这两个方法引入，这个是向左的三角形，向右的三角形也是一样的，就是判断里面的ind的值是相反的，判断ind == 3，如果是就让ind == 1，否则ind++，就完成了
3. 我们就可以去页面上点击那两个三角形，内容会相应的进行跳转，因为我们只设置了显示第一个div的内容其他的两个都隐藏了，效果就出来了，还可以通过鼠标移入相应的标题然后就显示相应的内容，这就需要通过类获取到box1里的所有span标签，然后再绑定鼠标移入事件，还需要通过getAttribute（）这个方法来获取某个span标签内的index属性，并把属性的值赋值给新声明的变量aa，然后再把aa赋值给ind，最后再把那两个写好的函数调用进来就OK了，然后可以去页面上试试效果。