使用jQuery制作选项卡效果

1)使用一个大盒子(div 将元素都装起来

2)盒子中使用2个无序标签分别搭建选项卡头部与内容

图例:

1)消除网页(盒子 默认边距

2)若无序列表中使用li标签,需要给ul添加d性盒子属性(方法不唯一)

3)给每个li标签添加鼠标cursor: pointer(鼠标指针小手)属性

4)为标题盒子(ul class=title)里的第一个子元素(li)添加颜色样式(默认为第一个子元素

5)给所有的内容盒子(ul class=content)添加此元素不会被显示的属性(display:none)

6)给内容盒子里的第一个元素添加 显示为块级元素(display: block)

图例:

点击相应的标题会显示相应的内容

1)引入jquery框架

2)获取标题(ul)中的每一项(li),并且为他们注册点击事件(-

3)点击事件里先移除之前的高亮标题样式,添加当前当前的高亮标题样式

(根据this指针的指向来添加和移除样式)

4)获取内容盒子的第一项元素

5)移除之前显示内容的样式,添加当前显示内容的样式

(根据this指针的指向来添加和移除样式,使用eq方法根据this的指向找到对应元素的索引)

注意:eq() 方法将匹配元素集缩减值指定 index 上的一个。

图例:

总结:使用jquery方法需注意:

this的指向性问题与选择器的使用问题

幸运的是, jQueryUI 使它们很容易实现。 下面是如何让它们迅速启动并正常运行。 HTML的基本结构如下: <div id="tab_wrapper"><ul><li><a href="#tab1">Tab 1</li><li><a href="#tab2">Tab 2</li></ul><div id="tab1">Tab 1 content here... </div1><div id="tab2">Tab 2 content here... </div1></div>通过单一ID的div指定这些锚变成标签,标签的列表将会在网页选项卡显示。当用户单击链接时,它将选择该选项卡。 只有短短的一行jQuery代码可以把这个HTML转换为选项卡式界面: $(function() { $( "#tab_wrapper" ).tabs()})多简洁的代码！ 我们甚至可以实现更进一步的功能。 该文档展示了较全功能 ,但我认为最有用的还是从外部来源加载数据。 通过使用的锚点到另一个页面的ID,而不是屏幕上一个项目,点击选项卡时它会自动加载资源，内容将通过AJAX加载。

---