jQuery实现的tab标签切换效果示例资源-CSDN文库

jQuery

tab标签

95 浏览量 2020-10-21 14:45:24 上传评论收藏 44KB PDF 举报

资源推荐

资源详情

资源评论

jQuery实现的实现的tab标签切换效果示例标签切换效果示例

主要介绍了jQuery实现的tab标签切换效果,结合实例形式分析了jQuery响应鼠标事件动态变换页面元素属性的相关操作技

巧,需要的朋友可以参考下

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.t-case{ width:715px; height:451px; background-color:#fff; margin:18px auto 0 auto;}

.t-case h3{ height:50px; line-height:50px; background-color:#178eb9;}

.t-case h3 a{ color:#fff; font-size:22px; padding-left:25px;}

.t-case h3 a:hover{ color:#fff; text-decoration:none;}

.m-case{ width:715px; height:401px;}

.m-case-show{ width:715px; height:291px;}

.ui-case-cont{ width:326px; height:291px;}

.ui-case-cont img{ width:260px; height:240px; padding:31px 0 0 35px;}

.ui-case-info{ width:389px;}

.ui-case-info p{ color:#000;}

.lb-case-title{font-size:16px; padding-top:76px;}

.lb-case-info{ font-size:14px; padding:16px 0 20px 0;}

.lb-case-item{ font-size:12px; line-height:20px;}

.ui-case-info a{ width:130px; height:33px; line-height:33px; display:block; border-radius:3px; font-size:16px; font-weight:bold; color:#fff; text-align:center; margin-top:22px;}

.ui-case-info a:hover{ color:#fff; text-decoration:none;}

.lb-zixun{ background-color:#b2aeaf;}

.lb-guahao{ background-color:#fa6101; margin-left:20px;}

.m-case-img{}

.m-case-img a{ width:127px; height:78px; display:block; margin-left:10px; _margin-left:8px; border:2px solid #fff;}

.m-case-img a:hover{ border:2px solid #178eb9;}

.m-case-img a img{ width:127px; height:78px;}

.ui-patient-item{ margin:9px 0 0 24px;}

.ui-patient-item a{ width:115px; height:38px; display:block; background-color:#178eb9; color:#fff; line-height:38px; text-align:center; margin:2px 5px 0 0;}

.ui-patient-item a:hover{ color:#fff; text-decoration:none;}

</style>

</head>

<body>