<!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>TAB滑动选项卡</title>

<meta http-equiv="keywords" content="关键词，关键词" />

<meta http-equiv="description" content="描写叙述说明" />

<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>

<style type="text/css">

*{margin:0;padding:0;}

#tm_wrapper{ margin:15px auto; width:960px; height:520px; background:#fff; border:1px solid #ccc; border-radius:10px; box-shadow:5px 5px 10px #ccc;}

#tm_button{ height:62px; background:#f1f1f1; border-bottom:1px solid #ccc; border-radius:10px 10px 0px 0px;}

#tm_button a{ display:block; text-decoration:none; color:#333; font-family:"微软雅黑"; font-size:12px;  float:left; margin-top:13px; margin-left:15px; height:35px; width:150px; line-height:35px; text-align:center;}

#tm_button a.ck{ border-radius:5px; background:#42b90f; color:#fff; font-weight:700;}

#tm_content{ height:458px; border-radius:0px 0px 10px 10px;}

#tm_content div{display:none; padding:10px; font-size:14px; line-height:26px;font-family:"微软雅黑"; }

</style>

</head>





<body>





<div id="tm_wrapper">

<div id="tm_button">

<a href="#" class="ck">慢阻肺专病网络医院</a>

<a href="#">慢阻肺专病网络医院特点</a>

<a href="#">慢阻肺专病网络医院长处</a>

<a href="#">慢阻肺专病网络医院咨询</a>

</div>

<div id="tm_content">

<div style="display:block;">

<p>慢阻肺专病网络医院。实际上就是以互联网为载体，开展在线医疗健康咨询和信息服务的专业健康站点。它主要提供三个方面的信息：在线健康咨询、医疗信息服务、医药营销与传播。

站点涵盖的范围非常广，有新闻、百科、健康专题、名医、医院、药品、商家、药品资讯、专业文刊等栏目。

不仅为咨询者提供了大量的专业信息，并且保证了在线服务的及时性与准确性。

</p>

</div>

<div>

<p>网络医院拥有强大的病症样本数据库、名医名院数据库、医药产品数据库、健康机构数据库、专业医疗信息引擎等网络资源。

通过这些资源，可为每位咨询患者提供专业的自诊程序，从而实现自我诊断。患者仅仅需以在线问答的形式发出疑问。便能与网上医生互动、交流，得到针对性解答，听取指导性解决方式。</p>

</div>

<div>

<p>以患者的需求为出发点，每一个网络医院一般都包含医院概况、资讯动态、就医指南、医患互动、视频图片、新闻资讯等。这些项目主要介绍医院不同科室的概况、各医院特色医疗项目的情况。

网友通过訪问医院专页。不仅能够了解咨询详细科室情况与坐诊专科医生，还可获得各种保健知识，了解医院最新动态。掌握医院举办的各种免费义诊等活动信息。</p>

</div>

<div>

<p>慢阻肺百科是一个普及慢阻肺疾病知识，解密慢阻肺疾病的慢阻肺门户网。旨在创造一个慢阻肺领域知识、服务全部慢阻肺疾病患者的慢阻肺百科网。

并邀请全国慢阻肺医院共同建立一个医患之间沟通的平台。解答全部慢阻肺疾病疑问。慢阻肺医生在线有非常多医生、专家依据你的病情给些对应的治疗建议，慢阻肺医院网上咨询在线医生。咨询慢阻肺医院在线专家，慢阻肺疾病查询，慢阻肺网上咨询疾病，咨询慢阻肺医生专家就去慢阻肺百科在线。</p>

</div>

</div>

</div>





<script type="text/javascript">

$("#tm_button a").hover(function(){

$("#tm_button a").removeClass("ck");

$(this).addClass("ck");

var div = {};

div=$("#tm_content div");

for(var i=0;i<div.length;i++){

if(i==$(this).index()){

$("#tm_content div").eq(i).show("fast");

}else{

$("#tm_content div").eq(i).hide("fast");

}

}

});

</script>

</body>

</html>

Jquery实现选项卡功能的更多相关文章

  1. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

  2. 基于jQuery带备忘录功能的日期选择器

    今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...

  3. 自己使用Jquery封装各种功能分享

    自己使用Jquery封装各种功能分享: 左右滚动图片 瀑布流 流动显示列表 广告切换 头像切换And广告切换 获取搜索引擎的来源关键字 上面列表中展示的功能都是使用jquery进行封装实现的,希望大家 ...

  4. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. jquery实现菜单功能（单击展开或者关闭）-一般应用于后台

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  6. js、jquery实现模糊搜索功能

    模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...

  7. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  8. 超炫jQuery测试答题功能

    推荐一款超炫jQuery测试答题功能插件 实例代码 <body> <div class="container" id="main"> & ...

  9. jquery制作选项卡

    思路:点击按钮后,先让所有的按钮的class属性都为“”,所有的div的display样式都为none:再让当前被点击按钮的class属性为active,以及所对应的div的display样式为blo ...

随机推荐

  1. Centos设置静态IP及修改Centos配置文件的方法

    通常,如果我们想更改主机地址为静态地址或者更改主机名,需要修改的几个文件包括: /etc/sysconfig/network Centos设置主机名和网络配置 /etc/sysconfig/netwo ...

  2. C#的MD5哈希值计算

    MD5哈希值计算:(仅仅是记录一下) /// <summary> /// 获取字符串的MD5值 /// </summary> /// <param name=" ...

  3. mybatis 一二事（1） - 简单介绍

    mybatis呢是一个orm数据库框架,非常适合新人学,门槛相对较低 本人呢曾经是先做的hibernate,后接触的mybatis,接触mabatis前我比较抵触,为啥呢, 当时喜欢hibernate ...

  4. 基于Django的独立运行python脚本开发

    Django框架很方便,比如其方便的ORM,如果写基于Django的独立运行脚本,主要在脚本前面加上以下代码: import sys,os,django sys.path.append(os.path ...

  5. rabbitmq 常用的一些命令

    rabbitmqctl set_user_tags admin administrator #给用户设置角色 rabbitmqctl set_permissions -p emove admin &q ...

  6. WebDriver 原理

    注:学会根据执行顺序看底层代码 <以下内容摘自大师兄博客> WebDriver webdriver是按照server – client的经典设计模式设计的. webdriver的作用就是创 ...

  7. Spark的基本说明

    1.关于Application 用户程序,一个Application由一个在Driver运行的功能代码和多个Executor上运行的代码组成(工作在不同的节点上). 又分成多个Job,每个Job由多个 ...

  8. Maven工程pom.xml文件秒变gradle工程的命令

    下面是一个maven工程,我想把它转成gradle项目,怎么办? 打开cmd命令行窗口,切换到你的maven工程的pom.xml文件所在目录,然后执行如下命令: gradle init --type ...

  9. 工作流模式 (zhuan)

    http://www.cnblogs.com/soundcode/archive/2010/12/30/1922283.html *********************************** ...

  10. 在WEB开发的时候导入各种jar包

    使用eclipse导入很简单 右击你的project,选择properties,然后选择java build path,接着选择libraries,点击add external jars即可 如果你还 ...