<!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>
效果图：
相关推荐
《JQ Tab标签页详解与应用实践》 在网页设计中，Tab标签页是一种常见的页面组织方式，它能够有效地将大量信息分门别类展示，提高用户体验。JQuery（简称JQ）作为一款广泛使用的JavaScript库，提供了丰富的功能，...
3. **HTML结构**：创建符合插件要求的HTML结构，通常包含一个包裹所有tab的容器和一组tab标签及对应的content区域。 4. **初始化插件**：在文档加载完成后，使用jQuery选择器找到tab容器，并调用插件方法初始化tab...
在网页设计中，Tab标签是一种常见的用户界面元素，它用于组织和展示大量信息，通过切换不同的选项卡来显示不同的内容区域。"jQuery 渐变切换Tab标签"是将这一交互方式与动态视觉效果相结合，为用户提供更加吸引人的...
在本文中，我们将深入探讨如何使用JavaScript库JQuery来实现一个经典的Tab标签切换效果。Tab切换效果是网页设计中常用的一种交互元素，它允许用户在不同的内容区域之间轻松导航，而无需加载新的页面。让我们逐步解析...
本教程将深入探讨如何使用jQuery实现多种Tab标签切换效果。 一、jQuery选项卡基础原理 选项卡的基本思想是通过切换不同内容区域的可见性来实现。在HTML结构中，通常有两部分：一是包含各个tab标签的容器，二是与之...
常用jQuery代码 jQuery 插件 jQuery菜单 jQuery焦点轮播 jQuery弹层代码 焦点轮播 tab标签切换代码 jQ图片浏览 说明：压缩包分为jQuery code 1，2，3三卷。 本压缩包为卷jQuery code 3
3. **jQuery插件**：有时，开发者会选择使用现有的jQuery插件，如Bootstrap的Tab插件或jQuery UI的Accordion组件，来快速实现标签切换功能。这些插件已经预设了动画效果和交互行为，可以节省大量开发时间。 4. **...
1. **HTML结构**：创建一个包含多个tab面板（每个面板代表一个内容区域）和一组触发切换的链接（即tab标签）。每个面板通常被隐藏，只显示当前选中的面板。 2. **CSS样式**：为Tab组件设置基本样式，包括标签的样式...
"JQ向上滑动切换Tab选项卡"是一个利用jQuery实现的创新性网页组件，旨在为用户提供一种新颖的标签切换体验。这个组件不仅提供了传统选项卡的切换功能，还通过向上滑动的手势增加了互动性和趣味性，同时保持了良好的...
本文将深入探讨“选项卡tab标签样式”在QQ在线客服代码中的应用，帮助你理解如何创建一个既实用又美观的在线客服系统。 选项卡（Tab）是一种常见的用户界面组件，它允许用户在多个视图之间切换，而无需打开新的窗口...
本篇将详细讲解如何利用jQuery实现鼠标滑动时的tab选项卡切换效果。 首先，理解选项卡的基本结构。一个常见的选项卡布局通常包含一组可视化的标签（tab）和对应的隐藏内容区域。当用户点击或滑过某个标签时，相应的...
本压缩包中的“jq多个选项卡标签切换代码”提供了使用 jQuery 创建多组选项卡的示例代码，旨在帮助开发者理解和应用这种交互式设计。 在jQuery中实现选项卡切换主要涉及以下步骤： 1. **HTML结构**：首先，我们...
它接收三个参数：tab（对应的Tab标签元素），isActive（激活状态的布尔值），mode（激活模式，可以是header或body，分别对应标签头和内容体的激活）。当isActive为false时，移除Tab标签的'active'类，并根据mode参数...
`jq.tab.js`中通常会有以下代码，用于实现标签切换功能： ```javascript $(document).ready(function() { $('.tabs li').click(function() { // 阻止默认链接行为 event.preventDefault(); // 获取当前点击的...
在JavaScript编程中，实现不同的颜色Tab标签切换效果是一种常见的用户界面设计需求，它可以提升网站或应用的用户体验。本文将详细解析实例代码，介绍如何利用HTML、CSS和JavaScript来创建这样的功能。 首先，HTML...
在网页设计中，用户体验往往与交互性紧密相关，而Tab切换是一种常见的交互元素，用于组织和展示内容。本文将深入探讨如何使用JavaScript库jQuery实现流畅的Tab切换效果，以提升网页的用户界面体验。 首先，jQuery是...