开发了很久的小程序,在接到一个h5移动端页面的时候,很多原生的东西都忘了,虽然说我们随着工作经验的增加,处理业务逻辑的能力在提高,但是基础的东西如果长时间不用,也会逐渐忘记。所以以后会经常总结原生的一些知识,一边后面自己忘记时,提供查询之所。
HTML

   <div class="wraper">
<div class="header">
<div class="search"><a href=""><img src="data:image/search.png" alt="">请输入名称进行搜索</a></div>
<div class="tab">
<div class="nav active"><a href="javascript:;">药品价格</a></div>
<div class="nav"><a href="javascript:;">非药品价格</a></div>
</div>
</div>
<div class="section">
<div class="med-hd">
<div class="name pink">名称</div>
<div class="guige pink">规格</div>
<div class="yblx pink">医保类型</div>
<div class="jine oriange">金额</div>
</div>
<div class="med-bd focus">
<div class="row">
<div class="name a">小儿复方氨酚烷胺颗粒</div>
<div class="guige">60ml/瓶</div>
<div class="yblx cir">甲类</div>
<div class="jine">35.5</div>
</div>
</div>
<div class="med-bd">
<div class="row">
<div class="name a">小儿咽扁颗粒</div>
<div class="guige">60ml/瓶</div>
<div class="yblx cir">甲类</div>
<div class="jine">35.5</div>
</div>
</div>
</div>
</div>

  

 
CSS
/*项目查询*/
body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{
margin:0;
padding:0;
}
html {
font-size: 26.67vw;
}
html,body{
height: 100%;
}
.wraper{
height: 100%;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-flex-direction: column;
background-color: #f1f1f1;
}
a {
text-decoration: none;
} a:link{
color: #404040;
}
a:visited{
color: #404040;
}
a:hover{
color: #404040;
}
a:active {
color: #404040;
}
ul,ol{
list-style:none;
}
img{
border: 0;
display: block;
} .header{
width: 100%;
height: 214px;
height: 1.07rem;
}
.header .search {
width: 100%;
height: 120px;
height: 0.6rem;
background-color: #ff4f8d;
display: flex;
align-items: center;
justify-content: center;
background-color: #ff4f8d;
box-sizing: border-box;
padding: 0.1rem 0.09rem;
}
.header .search a {
display: flex;
width: 100%;
height: 100%;
border-radius: 8px;
align-items: center;
font-size: 0.14rem;
box-sizing: border-box;
color: #fff;
background-color: #e6477f;
}
.header .search img {
width: 0.15rem;
height: 0.15rem;
margin: 0 0.14rem 0 0.12rem;
vertical-align: middle;
}
.tab {
width: 100%;
height: 0.45rem;
background-color: #fff;
box-sizing: border-box;
border-top: 1px solid #f1f1f1;
display: flex;
align-items: center;
}
.tab .nav {
width: 50%;
height: 100%;
box-sizing: border-box;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 4px solid transparent;
font-size: 0.17rem;
}
.tab .nav.active {
border-bottom: 4px solid #ff4f8d;
}
.tab .nav.active a {
color: #ff4f8d;
}
.tab .nav a {
color: #404040;
}
.medical-hd {
width: 100%;
}
.section{
width: 100%;
flex: 1;
background-color: #f1f1f1;
padding: 20px 24px 0;
padding: 0.1rem 0.12rem 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.med-hd {
width: 100%;
height: 70px;
height: 0.35rem;
box-sizing: border-box;
color: #fff;
font-size: 28px;
font-size: 0.14rem;
display: flex;
align-items: center;
text-align: center;
}
.name {
width: 242px;
width: 1.21rem;
border-right: 1px solid #f2f2f2;
box-sizing: border-box;
}
.guige {
width: 148px;
width: 0.74rem;
border-right: 1px solid #f2f2f2;
box-sizing: border-box;
}
.yblx {
width: 161px;
width: 0.85rem;
}
.jine {
width: 151px;
width: 0.755rem;
}
.name,.guige,.yblx,.jine {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.pink {background-color: #ff4f8d;}
.oriange {background-color: #ff990a;} .med-bd{
width: 100%;
flex: 1;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
background-color: #fff;
display: none;
}
.med-bd.focus{
display: block;
}
.med-bd .row{
width: 100%;
height: auto;
display: flex;
align-items: center;
flex-direction: row;
font-size: 0.14rem;
color: #404040;
border-bottom: 1px solid #f2f2f2;
}
.row div {
overflow: hidden;
height: auto;
min-height: 0.45rem;
_height: 0.45rem;
box-sizing: border-box;
}
.cir {
border-right: 1px solid #f2f2f2;
}
.a {
padding-left: 0.1rem;
box-sizing: border-box;
}
 
JS
var oNav = document.querySelectorAll('.nav');
var oCont = document.querySelectorAll('.med-bd');
oNav.forEach(function (item,index,array) {
item.onclick = function () {
oNav.forEach( (item,index,array) => {
item.className = "nav";
oCont[index].className = "med-bd";
});
item.className = "nav active";
oCont[index].className = "med-bd focus";
}
});

  

(效果三)js实现选项卡切换的更多相关文章

  1. 用js实现选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...

  2. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  3. js实现选项卡切换

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  4. js实现选项卡切换的三种方式

    前两种主要实现一个选项卡的切换,第三种使用闭包看书,构造函数实现多个选项卡的切换: 1.第一种实现实现效果为: 实现代码为: <!doctype html> <!DOCTYPE ht ...

  5. JS实现选项卡切换效果

    1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...

  6. js实现选项卡切换的效果

    效果图: css 代码: <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .demo ...

  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  8. 7、JavaScript总结——实现选项卡切换的效果

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

  9. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

随机推荐

  1. java中文转Unicode

    public String cnToUnicode(String cn) { char[] chars = cn.toCharArray(); String returnStr = "&qu ...

  2. PL/SQL编程—分页功能(存储过程)

    SQL),bookname ),publish )); Table created SQL> SQL> create or replace procedure sp_add_book(bo ...

  3. html 基础--一般标签

    <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

  4. kafka--producer配置解析

    producer解析 主要是解析一下producer的相关配置以及一些使用场景 相关解析 名称   说明 类型 默认值 有效值 重要性 bootstrap.servers 用于建立与kafka集群连接 ...

  5. java调用操作系统命令

    java的Runtime.getRuntime().exec(commandStr)可以调用执行cmd指令. cmd /c dir 是执行完dir命令后关闭命令窗口. cmd /k dir 是执行完d ...

  6. Python3.x:判断字符串是否为全数字、英文、大写、小写、空白字符

    Python3.x:判断字符串是否为全数字.英文.大写.小写.空白字符 判断接字符串是否为数字: str = raw_input("please input the number:" ...

  7. ASP.NET MVC 4.0 中使用NPOI 2.2.0 按模板生成Excel报表

    使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 WORD/EXCEL 文档进行读写.NPOI是构建在POI 3.x版本之上的,它可以在没有安装Office的情况下对Word/ ...

  8. BeatSaber节奏光剑插件开发官方教程1-创建一个插件模板

    原文:https://wiki.assistant.moe/modding/intro 一.简介 Beat Saber 开发环境:unity2018.C#..NET framework 4.6. 此教 ...

  9. Hbase:简单介绍一下Hbase表的结构

    HBase 是一个NoSQL数据库,用于处理海量数据,可以支持10亿行百万列的大表,下面我就和大家分享一下数据是如何存放在HBase表中的 为了更好的理解HBase表的思路,先回顾一下关系数据库中表的 ...

  10. 联合体union

    1.一般而言,共用体类型实际占用存储空间为其最长的成员所占的存储空间: //4*7==282.若是该最长的存储空间对其他成员的元类型(如果是数组,取其类型的数据长度,例int a[5]为4)不满足整除 ...