jQuery实现选项卡切换效果的简单演示

本文描述了jQuery实现选项卡切换效果的简单演示代码。分享给大家参考。具体如下：

运行渲染如下。

一、主程序

！a doctype html head metharset=' utf-8 '/title tab/title link type=' text/CSS ' rel='样式表' href=' CSS/layout . CSS '/head dy！-整体组织描述：使用ul完成按钮的水平布局，使用div完成三个内容框架的垂直布局(类似于class table)，然后隐藏所有三个内容框架。只有第一帧内容会通过下面的： first-child attribute-Div class=' tab ' Div class=' tab _ menu ' ul Li class=' on ' fact/Li Li politics/Li Li sports/Li/ul/Div class=' tab _ box ' Div实用内容/div政治内容/Div体育内容/div/div/div脚本类型=' text/JavaScript ' src=' http : js/jquery-1 . 11 . 3 . js '/Script type=' text/javacCSS样式的初步布局代码：

* { margin:0padd :0 } ul { list-style : none；}.tab { width: 300pxmargin: 0 auto}.选项卡。tab _ menu { border : 1px solid # 000000；height: 30px宽度： 300 px；}.选项卡。tab_menu ul li{左侧浮动：宽度： 99px；文本对齐：中心；线高： 30px；border-right: 1px #333333实心；}.选项卡。tab _ menu ul Li : last-child { border-right : none；宽度： 100 px；}.选项卡。tab _ menu ul Li . on { background : # 999；}.选项卡。tab _ box div { width: 300px高度： 200 px；border: #333333固体；边框宽度： 0 1px 1px 1px；}以上代码实现布局如下：

但是我们只需要把内容显示在一个框架里，在上面代码的前提下加一些小代码就够了~ ~ ~ ~ ~ ~。

更多布局样式代码：

* { margin:0padd :0 } ul { list-style : none；}.tab { width: 300pxmargin: 0 auto}.选项卡。tab _ menu { border : 1px solid # 000000；height: 30px宽度： 300 px；}.选项卡。tab_menu ul li{左侧浮动：宽度： 99px；文本对齐：中心；线高： 30px；border-right: 1px #333333实心；}.选项卡。tab _ menu ul Li : last-child { border-right : none；宽度： 100 px；}.选项卡。tab _ menu ul Li . on { background : # 999；}.选项卡。tab _ box div { width: 300px高度： 200 px；border: #333333固体；边框宽度： 0 1px 1px 1px；display:无；//隐藏全部三个内容框架，通过下面的：first-child属性只显示第一个框架内容}。tab . tab _ box div :第一个子级{ display:block}上面的程序在。选项卡。tab_box div样式，并且通过：first-child属性只显示第一帧内容~ ~ ~ ~ ~ ~，这样我们看到的布局和我上面刚开始播放的动画渲染一致，就认为布局完成了~ ~ ~ ~ ~ ~ 3。Jquery代码：

$(function(){ $(')。tab _ menu ul Li’)。单击(function(){ $(this))。addClass('on ')。兄弟姐妹()。remove CLaSS(' on ')；//切换所选按钮的高亮状态var index=$(this)。index()；//获取按下按钮的索引值。请注意，索引是$('。tab _ box div’)。eq(指数)。显示()。兄弟姐妹()。从0开始隐藏()；//当选择按钮时，显示下面相应的内容，隐藏不必要的框架内容})；});希望本文对大家学习jquery编程有所帮助。