<!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. Android利用Fiddler进行网络数据抓包【怎么跟踪微信请求】

    主要介绍Android及IPhone手机上如何利用Fiddler进行网络数据抓包,比如我们想抓某个应用(微博.微信.墨迹天气)的网络通信请求就可以利用这个方法. Mac 下请使用 Charles 代替 ...

  2. vim:将刚写的单词大写和单词的定义

    最近打算把caps lock映射成<esc>键,那按起来多爽,现在的有一个小问题,如何快捷的输入大写字母. 用这个键盘映射搞定. inoremap <c-u> <esc& ...

  3. 【Android】19.1 SharedPreferences类

    分类:C#.Android.VS2015: 创建日期:2016-03-05 一.简介 SharedPreferences:简单共享存储首选项.实际上就是用加密的内部文件保存所有页面都能访问的一系列“n ...

  4. 网络编程----------SOCKET编程实现简单的TCP协议

    首先我们须要大致了解TCP的几点知识: 1.TCP的特点:面向连接的可靠性传输 2.TCP的三次握手建立连接和四次挥手释放连接.但为什么TCP要三次握手建立连接呢? 答:由于两次握手无法保证可靠性.若 ...

  5. Oracle PLSQL Demo - 01.定义变量、打印信息

    declare v_sal ) :; begin --if you could not see the output in console, you should set output on firs ...

  6. dubbo注册zookeeper保错原因

    我的zookeeper是安装在本地,用的默认端口2181,版本3.4.10.dubbo版本2.5.8.dubbo-demo-provider.xml配置文件修改为:<dubbo:registry ...

  7. VC++编程之道读书笔记

    第二篇 缪误21:位图数据是按照红绿蓝顺序存储的 大家都知道位图的颜色是由红.绿.蓝三个分量构成的,但是位图颜色数据存储的方式则不是按照这个顺序存储的,而是按照蓝.绿.红的顺序存储的.并且对于真彩色位 ...

  8. Android开发：keytool' 不是内部或外部命令 也不是可运行的程序

    今天在更改keystore密码的时候,发生了这个问题:keytool' 不是内部或外部命令 也不是可运行的程序. 本来以为很简单觉得的问题,在网上搜索了一大堆答案,都不是我想要的,故在此记录下我的解决 ...

  9. 使用matplot做图--sin图像

    # _*_ coding:utf-8 _*_ import numpy as np import matplotlib.pyplot as plt x = np.arange(-5, 5, 0.1) ...

  10. git工作流教程

    简介:在用git进行开发时,需要规范化,这时用git工作流来规范化,软件开发过程 https://github.com/oldratlee/translations/blob/master/git-w ...