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 Array.remove() 数组删除
Aug 06 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
vue 数据双向绑定的实现方法
Mar 04 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怎样调用MSSQL的存储过程
2006/10/09 PHP
mysql中存储过程、函数的一些问题
2007/02/14 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
Yii框架form表单用法实例
2014/12/04 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
基于JQuery实现分隔条的功能
2016/06/17 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
vue实现分页栏效果
2019/06/28 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
python3使用GUI统计代码量
2019/09/18 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python绘图实现显示中文
2019/12/04 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
九州传奇上机题
2014/07/10 面试题
公司管理建议书范文
2014/03/12 职场文书
一年级学生评语大全
2014/04/21 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
大学生自荐材料范文
2014/12/30 职场文书
食堂管理制度范本
2015/08/04 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
pytorch 实现在测试的时候启用dropout
2021/05/27 Python