编程 Javascript

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

Posted in Javascript onSeptember 05, 2016

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<style type="text/css">
.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>
<div class="t-case">
  <h3><a href="###">测试</a></h3>
  <div class="m-case g-fl">
    <div class="m-case-show" id="incase1">
      <div class="ui-case-cont g-fl"><img src="img/case1.jpg" /></div>
      <div class="ui-case-info g-fl">
        <p class="lb-case-title">人名1 职业名称</p>
        <p class="lb-case-info">擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <p class="lb-case-item">XXX医生</p>
        <p class="lb-case-item">XXXXXXXXXXXX证书</p>
        <p class="lb-case-item">XXXXXXXXXXXXXXXXXXXXX会员</p>
        <a href="###" class="lb-zixun g-fl">在线咨询</a>
        <a href="###" class="lb-guahao g-fl">预约挂号</a>
      </div>
    </div>
    <div class="m-case-show" style="display:none;" id="incase2">
      <div class="ui-case-cont g-fl"><img src="img/case1.jpg" /></div>
      <div class="ui-case-info g-fl">
        <p class="lb-case-title">人名2 职业名称</p>
        <p class="lb-case-info">擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <p class="lb-case-item">XXX医生</p>
        <p class="lb-case-item">XXXXXXXXXXXX证书</p>
        <p class="lb-case-item">XXXXXXXXXXXXXXXXXXXXX会员</p>
        <a href="###" class="lb-zixun g-fl">在线咨询</a>
        <a href="###" class="lb-guahao g-fl">预约挂号</a>
      </div>
    </div>
    <div class="m-case-show" style="display:none;" id="incase3">
      <div class="ui-case-cont g-fl"><img src="img/case1.jpg" /></div>
      <div class="ui-case-info g-fl">
        <p class="lb-case-title">人名3 职业名称</p>
        <p class="lb-case-info">擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <p class="lb-case-item">XXX医生</p>
        <p class="lb-case-item">XXXXXXXXXXXX证书</p>
        <p class="lb-case-item">XXXXXXXXXXXXXXXXXXXXX会员</p>
        <a href="###" class="lb-zixun g-fl">在线咨询</a>
        <a href="###" class="lb-guahao g-fl">预约挂号</a>
      </div>
    </div>
    <div class="m-case-show" style="display:none;" id="incase4">
      <div class="ui-case-cont g-fl"><img src="img/case1.jpg" /></div>
      <div class="ui-case-info g-fl">
        <p class="lb-case-title">人名4 职业名称</p>
        <p class="lb-case-info">擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <p class="lb-case-item">XXX医生</p>
        <p class="lb-case-item">XXXXXXXXXXXX证书</p>
        <p class="lb-case-item">XXXXXXXXXXXXXXXXXXXXX会员</p>
        <a href="###" class="lb-zixun g-fl">在线咨询</a>
        <a href="###" class="lb-guahao g-fl">预约挂号</a>
      </div>
    </div>
    <div class="m-case-show" style="display:none;" id="incase5">
      <div class="ui-case-cont g-fl"><img src="img/case1.jpg" /></div>
      <div class="ui-case-info g-fl">
        <p class="lb-case-title">人名5 职业名称</p>
        <p class="lb-case-info">擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <p class="lb-case-item">XXX医生</p>
        <p class="lb-case-item">XXXXXXXXXXXX证书</p>
        <p class="lb-case-item">XXXXXXXXXXXXXXXXXXXXX会员</p>
        <a href="###" class="lb-zixun g-fl">在线咨询</a>
        <a href="###" class="lb-guahao g-fl">预约挂号</a>
      </div>
    </div>
    <div class="m-case-img">
      <a href="###" class="g-fl" id="case1"><img src="img/case1_img.jpg" /></a>
      <a href="###" class="g-fl" id="case2"><img src="img/case2_img.jpg" /></a>
      <a href="###" class="g-fl" id="case3"><img src="img/case3_img.jpg" /></a>
      <a href="###" class="g-fl" id="case4"><img src="img/case4_img.jpg" /></a>
      <a href="###" class="g-fl" id="case5"><img src="img/case5_img.jpg" /></a>
    </div>
  </div>
</div>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#case1').css('border-color','#178eb9');
  $('.m-case-img>a').mouseover(function(){
    var caseId = $(this).attr('id');
    $('#in'+caseId).show().siblings('.m-case-show').hide();
    $('#'+caseId).css('border-color','#178eb9').siblings('.m-case-img>a').css('border-color','#fff');
  });
});
</script>
</body>
</html>

效果图：

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

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

- Author -

onestopweb

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

AlertBox 弹出层信息提示框效果实现步骤

Oct 11 Javascript

jquery 学习之一对象访问

Nov 23 Javascript

基于jquery编写的横向自适应幻灯片切换特效的实例代码

Aug 06 Javascript

JQuery实现鼠标移动图片显示描述层的方法

Jun 25 Javascript

jQuery检查事件是否触发的方法

Jun 26 Javascript

JavaScript导航脚本判断当前导航

Jul 12 Javascript

javascript实现简易计算器

Feb 01 Javascript

JS表格组件神器bootstrap table使用指南详解

Apr 12 Javascript

详解Node.js中exports和module.exports的区别

Apr 19 Javascript

Spring Boot/VUE中路由传递参数的实现代码

Mar 02 Javascript

如何用原生js写一个弹窗消息提醒插件

May 24 Javascript

html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

Jan 12 Javascript

Vue.js每天必学之构造器与生命周期

Sep 05 #Javascript

Js查找字符串中出现次数最多的字符及个数实例解析

Sep 05 #Javascript

JS查找字符串中出现次数最多的字符

Sep 05 #Javascript

node网页分段渲染详解

Sep 05 #Javascript

js对象浅拷贝和深拷贝详解

Sep 05 #Javascript

JS实现隐藏同级元素后只显示JS文件内容的方法

Sep 04 #Javascript

jQuery实现智能判断固定导航条或侧边栏的方法

Sep 04 #Javascript

You might like

php防止sql注入之过滤分页参数实例

2014/11/03 PHP

54个提高PHP程序运行效率的方法

2015/07/19 PHP

Symfony2中被遗弃的getRequest()方法分析

2016/03/17 PHP

才发现的超链接js导致网页中GIF动画停止的解决方法

2007/11/02 Javascript

Js中获取frames中的元素示例代码

2013/07/30 Javascript

仿百度的关键词匹配搜索示例

2013/09/25 Javascript

jquery如何获取元素的滚动条高度等实现代码

2015/10/19 Javascript

jquery插件uploadify实现带进度条的文件批量上传

2015/12/13 Javascript

基于javascript实现彩票随机数生成（升级版）

2020/04/17 Javascript

Node.js Express 框架 POST方法详解

2017/01/23 Javascript

canvas实现十二星座星空图

2017/02/14 Javascript

vue-cli+webpack记事本项目创建

2017/04/01 Javascript

nodejs个人博客开发第五步分配数据

2017/04/12 NodeJs

React-router 4 按需加载的实现方式及原理详解

2017/05/25 Javascript

Vue.js实现的计算器功能完整示例

2018/07/11 Javascript

vue--点击当前增加class,其他删除class的方法

2018/09/15 Javascript

angularJs自定义过滤器实现手机号信息隐藏的方法

2018/10/08 Javascript

抖音上用记事本编写爱心小程序教程

2019/04/17 Javascript

node.js处理前端提交的GET请求

2019/08/30 Javascript

[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局

2016/02/28 DOTA

python通过pil为png图片填充上背景颜色的方法

2015/03/17 Python

Python中为什么要用self探讨

2015/04/14 Python

Python自定义函数计算给定日期是该年第几天的方法示例

2019/05/30 Python

基于Tensorflow使用CPU而不用GPU问题的解决

2020/02/07 Python

python实现粒子群算法

2020/10/15 Python

用python 绘制茎叶图和复合饼图

2021/02/26 Python

美国最大的在线寄售和旧货店：Swap.com

2018/08/27 全球购物

俄罗斯在线服装店：STOLNIK

2021/03/07 全球购物

环境工程与管理大学毕业生求职信

2013/10/02 职场文书

《金子》教学反思

2014/04/13 职场文书

初三开学计划书

2014/04/27 职场文书

2014个人反腐倡廉思想汇报

2014/09/15 职场文书

公司财务会计主管应聘求职信

2014/09/26 职场文书

车间主任岗位职责范本

2015/04/08 职场文书

如何用PHP websocket实现网页实时聊天

2021/05/26 PHP

【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN

2022/04/02 DOTA