jQuery导航切换功能
Css --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
/*医疗团队 医院简介导航样式*/
.MedicalteamAttr
{
width:140px; height:39px; border:solid 1px Gray; border-bottom:solid #00abeb 3px; background-color:White; float:left; text-align: center; cursor:pointer;
}
.Medicalteam1
{
width:140px; height:39px; border:solid 1px Gray; float:left; text-align:center;cursor:pointer;
}
.dh
{
width:550px; height:38px;
}
.yyjj
{
}
.yltd
{
}
/*医疗团队 医院简介导航样式结束*/
jQuery -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- /**********************医院简介,医疗团队导航********************/
/*导航单击事件*/
$(".dh").children("div").click(function(){
/*得到当前选中Id*/
var a= $(this).attr("class","MedicalteamAttr").siblings("div").attr("class","Medicalteam1");
var id=a.prop("id");
if(id=="yltds")
{
$(".yyjj").show();
$(".yltd").hide();
}else{
$(".yyjj").hide();
$(".yltd").show();
}
return false;
});
js:父级div的子级单击方法,当前div样式替换为点击后样式(bottom下边框变为蓝色),并且当前div同辈元素变换为未点击样式(bottom下边框恢复原状)
/**********************医院简介,医疗团队导航结束********************/
Div --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<div style="width: 550px; height: 40px; ">
<div class="dh">
<div class="MedicalteamAttr" id="yyjjs">
<span style="line-height: 40px; font-size: 16px; font-weight: bold;">医院简介</span></div>
<div class="Medicalteam1" id="yltds">
<span style="line-height: 40px; font-size: 16px; font-weight: bold;">医疗团队</span></div>
</div>
</div>
<%--导航 这里要写JS--%>
<div style="width: 550px; height: 20px;">
</div>
<div style="width: 550px; height: 330px; line-height: 30px; font-size: 14px; border: solid #eeeeee 1px;">
<div class="yyjj" style="width: 530px; height: 330px; margin-left: 10px;">
<span>洗澡、美容、寄养及用品销售为一体的大型综合性动物医院。
医院营业面积200多平米、设有诊断室(内科、外科、健康检查室)、化验室、手术室、X光室、药房等。本院拥有大型X光机、呼吸麻醉机、全自动血液分析仪、爱德士全自动生化分析仪、心电监护仪、超声波洁牙机等先进动物诊疗设备。
</span>
</div>
<div class="yltd" style="width: 530px; height: 330px; margin-left: 10px; display:none;">
<span>医疗团队:由毕业于中国农业大学动物医学院,获得全国执业兽医师资格的专业兽医师构</span>
</div>
</div>
转载于:https://www.cnblogs.com/LOVEJIEYING/p/5029268.html
jQuery导航切换功能相关推荐
- 2020用vue实现仿美团导航切换功能和淘宝购物车功能,实现默认第一个导航显示效果?
总结:之前一直未写过同时实现跳转当前页面和跳转新页面的项目,要么是当前,要么是新页面,今天更新一个两个同时实现的项目. :相信很多人都遇到过router-link通过to跳转页面有时候会不显示内容的b ...
- jquery选项卡切换功能实现
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- Android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
前言 大家好,我是 Vic,今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fra ...
- php 购买车票,jQuery实现买火车票城市选择切换功能
大家在买火车票的时候都会选择不同的城市,本文通过实例代码给大家分享了jQuery实现火车票买票城市选择切换功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家. 效果图如下所示: s ...
- 08﹑导航子页面切换功能5_实现导航栏子页面切换
08﹑导航子页面切换功能5_实现导航栏子页面切换
- 使用jQuery实现图片轮播与切换功能
使用jQuery实现图片轮播与切换功能 文章目录 使用jQuery实现图片轮播与切换功能 效果图 一.body 二.jQuery 三.css 四.小结 效果图 一.body <body>& ...
- javascript回车完美实现tab切换功能
javascript回车完美实现tab切换功能 javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过exce ...
- 36个引人注目JQuery导航菜单
1.jQuery 选项卡界面 / 选项卡结构菜单教程 这种类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心 ...
- html5 tab菜单切换页面,11个常用的jQuery TAB切换菜单源码及制作教程
11个常用的jQuery TAB切换菜单源码及制作教程 Sponsor TAB切换式菜单可以方便为我们减少很多网页布局空间,而且用jQuery的话可以加入一些动画效果,比如渐变,向左右滑动等,提升一定 ...
最新文章
- python和anaconda的区别_anaconda和python区别
- vue 删除页面缓存_vue项目强制清除页面缓存的例子
- 配置Haproxy增加日志记录功能
- 爬虫-scrapy的中间件
- 剑指 Offer 29. 顺时针打印矩阵
- Ubuntu 14.04 16.04 安装最新的 docker
- 一行命令自动给图片戴上口罩,硬核操作!
- linux-msyql
- c++中的stl容器——map的介绍与常用用法
- 淘宝联盟官方APi在小程序云函数中的使用教程(附案例)
- 火线安全:Log4j2 史诗级漏洞波及全球6万+开源软件
- windows提权速查流程
- html 93c,对93c46编程
- 普通打印机如何在A4纸上打印不同内容的标签
- 微软发布视频消息应用Qik:42秒录制、两周后自动消失
- mac系统python读取文件路径_python读取文件常见问题(Mac版)
- Ubuntu 16.04安装搜狗输入法
- 利用Python进行数据分析:电子书
- EACCES: access denied‘ does your client key have mgr caps
- 新版标准日本语高级_第20课
热门文章
- golang 线程 Java线程_Golang 学习笔记(06)—— 多线程
- jQuery 判断元素是否存在
- r型聚类分析怎么做_营销型网站怎么做?
- python hist 参数_关于python中plthist参数的使用详解
- linux 引导程序修复工具,技术|Linux下修改引导器的工具:Boot-Repair
- k8s 查看mysql 日志_k8s 使用 Init Container 确保依赖的服务已经启动
- python语言是二进制语言吗_Python语言之运算符
- linux获取read值,read命令读取用户输入
- mysql 导入 redis_mysql 数据导入redis缓存
- python的特殊类_python - 类的特殊成员方法