查询界面制作选项卡

先看效果：

Jquery-UI选项卡实际上是基于锚点链接的原理，实现起来非常简单。

第一步：介绍jquery和jquery-ui文件。以下是我的部门代码：

Head meta charset='UTF-8' title选项卡/title link rel='样式表' href=' style。CSS ' script type=' text/JavaScript ' src=' http :/libs/jquery-1 . 8 . 3 . js/' script script type=' text/JavaScript ' src=' http :/libs/jquery-ui-1 . 9 . 2 . custom . js/' script script type=' text/JavaScript ' src=' http : script . js '/script/head步骤2:编写面板布局。

body div ID=' TAB ' ul lia href=' # TAB-1 ' Class=' is selected ' TAB 1/A/Li lia href=' # TAB-2 ' Class=' Unselected ' TAB 2/A/Li lia href=' # TAB-3 ' Class=' Unselected ' TAB 3/A/Li/ULDIV ID=' TAB-1 ' TAB 1内容-人民网北京12月9日电(唐佳怡)本周，天津被任命为市委常委、市纪委书记/div div id='tab-2'TAB2内容-湖南省第十二届人民代表大会第六次会议闭幕，湖南省代省长许当选为省长。京津冀省委迎来新成员：任命北京市副市长林克庆为北京市委常委；中央国家机关纪律工作委员会书记邓修明，“空降”/div id=' tab-3 ' TAB3内容-上海市副市长周波为上海市委常委；湖北省副省长任振鹤、石岩市委书记周济为湖北省委常委。/div /div /body其中id='tab '的div用来包装我们整个标签页，ul中的内容是我们点击切换的部分，ul下方的div是我们切换标签页时显示的内容。

a标记href='#tab-1 '，href='#tab-2 '和href='#tab-3 '对应于div中的id=' tab-1 '，id=' tab-2 '和id=' tab-3 '。标签的样式和点击选择后的效果可以自己定义。

第三步：写剧本。在这里，我们还想在加载dom后开始运行我们的代码。选择选项卡后，我们可以使用。tab()方法实现tab功能。

$(function(){ $('#tab '))。制表符()；});简单的tab功能可以通过几个简单的步骤来实现，具体的风格效果可以根据自己的要求来写。附上这个例子的源代码地址：https://github.com/Nong weiyi/csdnblogpprojects/tree/master/jquery-ui/tab

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。