<!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. jsp指令和重定向

    1 声明指令 格式:<%!声明变量或函数 %> 作用:会生成一个成员变量或成员方法,也可以使用访问修饰符修饰,public,private,protected 2 注释指令 格式:< ...

  2. mac下安装mysqlcient 报错

    一.我在mac下pip3安装mysqlclient 报错: pip3 install mysqlclient Collecting mysqlclient Using cached mysqlclie ...

  3. Git教程Git多人协作开发

    Git可以完成两件事情: 1. 版本控制 2.多人协作开发 如今的项目,规模越来越大,功能越来越多,需要有一个团队进行开发. 如果有多个开发人员共同开发一个项目,如何进行协作的呢. Git提供了一个非 ...

  4. hash和md5

    一.hash和md5 Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算法,变换成固定长度的输出,该输出就是散列值. md5 ...

  5. 创建者模式Builder

    创建者模式: 分离对象子组件的单独构造(由Builder来负责)和装配(由Director负责),对象的构造比较复杂时使用 该模式. 类图: Builder 抽象建造者接口,规范各个组成部分的构建. ...

  6. 源码编绎的时候报错 tengine-2.1.0 error: the HTTP rewrite module requires the PCRE library.

    ./configure: error: the HTTP rewrite module requires the PCRE library. You can either disable the mo ...

  7. 【Java】代理模式，静态代理和动态代理（基于JDK或CGLib）

    当我们需要在一个方法之前或之后添加一段逻辑时,自然会想到使用代理类.代理类帮我们代理了实际类的调用,然后可以在实际调用之前和之后添加一些逻辑,从而不浸入实际类. 拓展:由于代理类能在实际类调用之前和之 ...

  8. Oracle PLSQL Demo - 14.定义定参数的显示游标

    declare v_empno scott.emp.empno%type; v_sal scott.emp.sal%type; ) is select t.empno, t.sal from scot ...

  9. VC++编程之道读书笔记（2）

    第三篇 技术细节 第七章:细说开发人员必知必会的39个开发细节 细节36:单例模式的应用 在开发程序时,往往需要在整个工程中只需要一个类的实例.而这个实例一旦被创建就不能被其他的实例再创建了,通常我们 ...

  10. LeetCode: Sort List 解题报告

    Sort List Sort a linked list in O(n log n) time using constant space complexity. 使用Merge Sort, 空间复杂度 ...