这篇文章主要介绍了jQuery+CSS实现的标签页效果,涉及基于jQuery的事件绑定、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了jQuery+CSS实现的标签页效果。分享给大家供大家参考，具体如下：
CSS代码：
#tabs{ width:600px; height:250px; background:white; margin:20px; } #tabs ul{ float:left; margin:20px 0 0 20px; padding:0; } #tabs li{ width:80px; height:40px; line-height:40px; display:inline-block; text-align:center; border-bottom:1px solid grey; border-top-left-radius:5px; border-top-right-radius:5px; background:#eeeeee; position:relative; top:1px; } #tabs li:hover{ color:#aaaaaa; cursor:pointer; } .items{ width:560px; height:175px; font-size:16px; text-align:center; border:1px solid grey; float:left; margin-left:20px; } jQuery代码：
$(document).ready(function(){ $("li").bind("click",function(){ $(".items").hide(); $("#"+$(this).attr("name")).show(); $("li").css({ "border-top":"1px solid white", "border-left":"1px solid white", "border-right":"1px solid white", "border-bottom":"1px solid grey", "background":"#eeeeee" }); $(this).css({ "border-top":"1px solid grey", "border-left":"1px solid grey", "border-right":"1px solid grey", "border-bottom":"1px solid white", "background":"white" }); }); $("li:first-child").click(); }); HTML部分代码：
- 标签1
- 标签2
- 标签3
- 标签4
内容1内容2内容3内容4
这里使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.0133.cn/code/WebCodeRun，测试运行效果如下：
感兴趣的朋友可以动手测试一下看看效果如何。
PS：或者还可以将上述代码组合成完成的HTML页面，再使用在线HTML/CSS/JavaScript代码运行工具：http://tools.0133.cn/code/HtmlJsRun，测试运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
以上就是jQuery+CSS实现的标签页效果示例【测试可用】的详细内容，更多请关注0133技术站其它相关文章！
