jQuery CSS实现的标签页效果示例【测试可用】

本文实例讲述了jQuery CSS实现的标签页效果。分享给大家供大家参考，具体如下：

半铸钢钢性铸铁(铸造半钢)代码：

#制表符{宽度：600像素高度：250 px背景：白色；边距：20px} #制表符ul { float:left余量余量：20像素0 0 20像素划水：0;} #制表符li { width:80px高度：40 px线高：40 px显示：内嵌块；文本对齐：居中；边框-底部：1px纯灰色；边框-左上角-半径：5 px边框-右上角-半径：5 px背景技术# eeeeee位置：相对；top:1px} # tab Li :悬停{ color : # aaaaa光标：指针指针；}.项目{ width :560 pxh three :175 px font-size :16 px；文本对齐：居中；border:1px纯灰色；float:left边距-左侧：20 px}jQuery代码：

$(文档)。ready(function(){ $('li ')).bind('click '，function(){ $(').项目')。hide()；$('#' $(这个).attr('名称').show()；$('li ').css({ 'border-top':'1px纯白，'左边框' :'1px纯白，'右边框' :'1px纯白，'边框-底部' :'1px纯灰，' background ' : ' # eeee ' })；$(这个)。css({ 'border-top':'1px纯灰，'左边框' :'1px纯灰，'右边框' :'1px纯灰，'边框-底部' :'1px纯白，'背景' : '白色' })；});$(' li:第一个孩子').单击();});超文本标记语言部分代码：

脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js/script div id=' tab ' ul Li name=' lst 1 '标签1/李莉名称='lst2 '标签2/李莉名称='lst3 '标签3/李莉名称='lst4 '标签4/Li/ul div class=' items ' id=' lst 1 '内容1/div div class='items' id='lst2 '内容div class=' items ' id=' lst3 '内容div class=' items ' id=' lst4 '内容4/分区/分区这里使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun，测试运行效果如下：

感兴趣的朋友可以动手测试一下看看效果如何。

PS:或者还可以将上述代码组合成完成的超文本标记语言页面，再使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行效果。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。