Python语言

微信小程序

php语言

jsp语言

asp语言

C#/.NET

html5/css

javascript

c/vc/c++语言

点击排行

您现在的位置:首页 > 技术文档 > jquery

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

来源:中文源码网    浏览: 次    日期:2018年9月2日
【下载技术文档:  jQuery+CSS实现的标签页效果示例【测试可用】 】


jQuery+CSS实现的标签页效果示例【测试可用】 本文实例讲述了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.zwyuanma.com/code/WebCodeRun,测试运行效果如下:感兴趣的朋友可以动手测试一下看看效果如何。
PS:或者还可以将上述代码组合成完成的HTML页面,再使用在线HTML/CSS/JavaScript代码运行工具:http://tools.zwyuanma.com/code/HtmlJsRun,测试运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。

亲,试试微信扫码分享本页! *^_^*

精彩推荐

相关内容