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实现的tab标签切换效果示例

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

Javascript 相关文章推荐
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
实例详解Node.js 函数
Jun 10 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 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
一个SQL管理员的web接口
2006/10/09 PHP
php实现文件下载代码分享
2014/08/19 PHP
两款万能的php分页类
2015/11/12 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
JS自动缩小超出大小的图片
2012/10/12 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
python基本语法练习实例
2017/09/19 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
幼儿园中班新学期寄语
2014/01/18 职场文书
读书活动实施方案
2014/03/10 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
三行辞职书范文
2015/02/26 职场文书
孔子观后感
2015/06/08 职场文书
公司食堂管理制度
2015/08/05 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Python 数据可视化之Bokeh详解
2021/11/02 Python
PHP遍历数组的6种方式总结
2021/11/17 PHP
Python数据结构之队列详解
2022/03/21 Python