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 相关文章推荐
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
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中动态显示签名和ip原理
2007/03/28 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
python通过smpt发送邮件的方法
2015/04/30 Python
Python 26进制计算实现方法
2015/05/28 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
公益广告宣传方案
2014/02/28 职场文书
社区党务公开实施方案
2014/03/18 职场文书
小学捐书活动总结
2014/07/05 职场文书
纪委立案决定书
2015/06/24 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL