jQuery制作网页版本标签

Web tab可以很好的利用有限的页面展示更多的元素，使用JQuery制作Web tab也是一件非常简单的事情。今天，让我们分享一个制作网页标签的小技巧。

介绍所需库选项卡原理业务核心完整小示例

导入所需的库

这个知识点很基础，但是为了照顾新鲜人，我还是写下来吧。

Tab原则

事实上，当选项卡出现时，只有一个div获得显示的权限，其他的不会显示。网页代码

Div class=' tab ' Div class=' tab _ menu ' ul Li class=' selected '选项卡1/li li选项卡2/li li选项卡3/Li/ul/Div brbr Div class=' tab _ box ' Div选项卡1:这是1号内容区域/Div class=' hide '选项卡2:这是2号内容区域/Div class=' hide '选项卡3:这是3号内容区域//div /div/div添加一些样式元素

样式//使UL的li标签水平排列ul { display:inlinewhite-space : nowrap；} li { margin:3pxfloat:left背景：红色；//这样可以防止li标签的显示被包裹。display : inline-block；} .tab _ menu { list-style : none；/*删除ul */margin: 0px前的符号；/*与外部元素的距离为0 */padd : 0px；/*与内部元素的距离为0 */width : auto；/*宽度根据元素内容调整*/}。tab _ box { background-color : # 465 c71；/*背景色*/border: 1px #4e667d纯色；/*边框*/color : # dde4ec；/*文本颜色*/display:块；/*此元素将显示为块级元素，在其前后有换行符*/line-height : 1.35 em；/*行高*/padd : 4px 20px；/*内部填充的距离*/text-decoration : none；/*不显示超链接下划线*/white-space : nowrap；/*对于文本中的空格，它不会换行，并且文本将继续在同一行，直到它符合br标记。*/} .选中{背景-颜色：绿色；display:块；} .隐藏{ display: none}/style JQuery控件

Script //加上鼠标点击效果$ (function () {$ ('ul Li ')。单击(function () {$ (this))。addclass ('selected ')。兄弟姐妹()。removeclass('选定')；var索引=$('ul li ')。索引(这个)；$('div.tab_box div ')。eq(指数)。显示()。兄弟姐妹()。hide()；})})//添加鼠标悬停效果$ (function () {$ ('div。tab _ menu ul Li’)。悬停(function () {$ (this))。添加类(“选定的”)。show()；//下面一个可以实现制表符的联动效果。var索引=$('ul li ')。索引(这个)；$('div.tab_box div ')。eq(指数)。显示()。兄弟姐妹()。hide()；}，function(){ $(this)。removeClass('选定')。show()；//下面一个可以实现制表符的联动效果。var索引=$('ul li ')。索引(这个)；$('div.tab_box div ')。eq(指数)。显示()。兄弟姐妹()。hide()；})})/脚本业务核心

事实上，最重要的是使用基本的JQuery选择器，然后我们可以动态地更改页面上的元素，以达到预期的效果。这也是JQuery的强项。

这里更巧的是通过变换ul li风格达到类似导航栏的效果。我们可以从未来的发展中学习。这是一个非常实用的技巧。

//使UL的li标签水平排列ul { display:inlinewhite-space : nowrap；} li { margin:3pxfloat:left背景：红色；display : inline-block；}完整的小示例

！DOCTYPE html html head meta charset=' utf-8 ' title选项卡Host Demo/title脚本类型=' text/JavaScript ' src=' http : jquery-2。2 .4 .量滴js '/脚本样式/使得（美)保险商实验所(保险商实验室)中的里标签水平排列ul { display : inline new white-space : nowrap；} Li { margin :3 pxfloat 3360 left背景：红色；显示：内嵌块；} .tab _ menu {列表样式：无；/* 去掉保险商实验所前面的符号*/margin : 0px；/* 与外界元素的距离为0 */padd : 0px；/* 与内部元素的距离为0 */宽度： auto/* 宽度根据元素内容调整*/} .tab _ box {底色： # 465 c71/* 背景色*/border: 1px #4e667d固体；/* 边框*/color : # DDE 4 EC；/* 文字颜色*/display:块；/* 此元素将显示为块级元素，此元素前后会带有换行符*/行高： 1.35 em/* 行高*/padd : 4px 20px；/* 内部填充的距离*/text-装饰：无；/* 不显示超链接下划线*/空白： nowrap/* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到英国铁路公司标签为止。 */} .选中{背景-颜色：绿色；显示器：块；} .隐藏{ display : none }/style/head dydiv class=' tab ' div class=' tab _ menu ' ul Li class=' selected '选项卡1/李莉选项卡2/李莉选项卡3/Li/ul/div brbr div class=' tab _ box ' div选项卡1:这里是一号内容区域/div div class='hide '选项卡2:这里是2号内容区域/div div class='hide '选项卡3:这里是3号内容区域/div/divscript /加上鼠标的点击效果$(function(){ $('ul li ').单击(function(){ $(this)).addClass(')选定')。兄弟姐妹()。removeClass(“”选定');定义变量索引=$('ul li ').索引（这个);$('div.tab_box div ').eq(指数)。显示()。兄弟姐妹()。hide()；}) }) //加上鼠标悬浮效果$(function(){ $(' div。tab _ menu ul Li’).悬停(function(){ $(this)).addClass(')选定')。show()；//下面的这个可以实现选项卡的联动效果定义变量索引=$('ul li ').索引（这个);$('div.tab_box div ').eq(指数)。显示()。兄弟姐妹()。hide()；}，function(){ $(this).removeClass(“”选定')。show()；//下面的这个可以实现选项卡的联动效果定义变量索引=$('ul li ').索引（这个);$('div.tab_box div ').eq(指数)。显示()。兄弟姐妹()。hide()；})})/脚本/正文/html实现的效果如下：

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