<!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】3.19 示例19--全景图HelloWorld

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 百度全景图是一种实景地图服务.为用户提供城市.街道和其他环境的360度全景图像,用户可以通过该服务获得如临其境 ...

  2. 用 Angularjs 重构了整个 Raysnote 笔记本前端， v2.0 上线

    Raysnote是一个简洁优雅的在线笔记工具,致力于提升笔记书写和阅读的体验. 简洁高效的笔记本管理后台(Angularjs重构) 支持HTML/Markdown两种格式,重点关注和支持Markdow ...

  3. vim学习日志（5）：vim下wimrc的配置，解决中文乱码问题

    解决linux下vim乱码的情况:(修改vimrc的内容) 全局的情况下:即所有用户都能用这个配置 文件地址:/etc/vimrc 在文件中添加: ,ucs-bom,gb18030,gbk,gb231 ...

  4. Qt入门－layout布局

    开发一个图形界面应用程序,界面的布局影响到界面的美观.在设计一个界面之前,应该考虑到开发的界面可能给不用的用户使用,而用户的屏幕大小.纵横比例.分辨率可能不同,界面还可能是可缩放的,程序应该可以适应这 ...

  5. feignclient设置hystrix参数

    序 feign默认集成了hystrix,那么问题来了,如何像hystrix command那样设置每个方法的hystrix属性呢. 实例 @FeignClient("product" ...

  6. Filter详解

    转自 http://blog.csdn.net/yudaoai/article/details/4231333 filter功能.它使用户可以改变一个 request和修改一个response. Fi ...

  7. 【Java】高并发同步Volatile的使用

    引言: 在多线程并发编程中synchronized和Volatile都扮演着重要的角色,Volatile是轻量级的Synchronized,它在多处理器开发中保证了共享变量的“可见性”. 可见性的意思 ...

  8. Redis之Python操作

    Redis简单介绍 如果简单地比较Redis与Memcached的区别,大多数都会得到以下观点:1 Redis不仅仅支持简单的k/v类型的数据,同时还提供list,set,zset,hash等数据结构 ...

  9. vim添加复制（crtl+c）,粘贴（ctrl+v）ctrl+A 等快捷键

    1  在  /usr/share/vim/vimrc文件中添加   source $VIMRUNTIME/mswin.vim 2  mswin.vim位置在 /usr/share/vim/vim72/ ...

  10. 贪心算法or背包问题

    贪心方法:总是对当前的问题作最好的选择,也就是局部寻优.最后得到整体最优. 应用:1:该问题可以通过“局部寻优”逐步过渡到“整体最优”.贪心选择性质与“动态规划”的主要差别. 2:最优子结构性质:某个 ...