<!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. mysql-5.7 innodb change buffer 详解

    一.innodb change buffer 介绍: 1.innodb change buffer 是针对oltp场景下磁盘IO的一种优化(我也感觉这个不太像人话,但是它又非常的准确的说明 innod ...

  2. verilog中的latch到底是个啥？？简直快疯了！！！！！

    在很多地方都能看到,verilog中if与case语句必须完整,即if要加上else,case后要加上default语句,以防止锁存器的发生,接下来就来说说其中原因. 一,什么是锁存器?锁存器与触发器 ...

  3. webBench&ad网站并发测试工具

    webBench 测试工具使用,网站上线前压力测试工具. ad测试工具

  4. 【Android】将Xamarin For VS升级为4.0.1.145版

    分类:C#.Android.VS2015 创建日期:2016-03-18 一.卸载原来安装的Xamarin for VS 4.0.0.1717版 下面是Xamarin for VS发布的版本简介: - ...

  5. Flask教程 —— Web表单（上）

    第二章中介绍的request对象公开了所有客户端发送的请求信息.特别是request.form可以访问POST请求提交的表单数据. 尽管Flask的request对象提供的支持足以处理web表单,但依 ...

  6. Django视图之URLconfs

    对于一个web程序而言,接收和处理用户的请求并返回响应是一个最基本的.也是最重要的功能. Django为这个功能取了一个好听的名字——“视图”. 而具体的代码实现往往是通过一个个函数,Django中也 ...

  7. python（33）多进程和多线程的区别

    多线程可以共享全局变量,多进程不能.多线程中,所有子线程的进程号相同:多进程中,不同的子进程进程号不同. #!/usr/bin/python # -*- coding:utf-8 -*- import ...

  8. 安卓开发之Toolbar

    根据官网的教程,发现实现与预期不一致,查看相关资料自己整理了一下(官网开发文档:https://developer.android.com/training/appbar/setting-up.htm ...

  9. 1326: The contest（并查集+分组背包）

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1326 殷犇有很多队员.他们都认为自己是最强的,于是,一场比赛开始了~ 于是安叔主办了一场比赛,比赛 ...

  10. JAVA-JSP Scriptlets(JSP小脚本)

    相关资料: <21天学通Java Web开发> 结果总结: 1.<% %>可以包含多个语句,如:方法.变量.表达式.2.类型定义时,如:int.String必须注意大小写. 实 ...