一.效果图
二.代码之风
2.1 html:
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2019/11/15
Time: 10:32
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<title>Tab切换</title>
<link rel="stylesheet" type="text/css" href="../test.css"/>
</head>
<body>
<div class="block_active">
<div class="block_tab flex">
<p class="cur"><span>tab1</span></p>
<p><span>tab2</span></p>
<p><span>tab3</span></p>
</div>
<div class="block_tabContent">
<!--这里没加hide样式,页面加载默认显示-->
<div class="showWrapper">
<dl class="actItem">
<dt class="actTitle">说明1</dt>
<dd>前3个月<em>###</em> 4-6个月仅收取<em>###</em></dd>
</dl>
<dl class="actItem">
<dt class="actInfo">说明2</dt>
<dd>***</dd>
</dl>
</div>
<div class="showWrapper hide">
<dl class="actItem">
<dt class="actTitle">说明1</dt>
<dd>前3个月<em>###</em> 4-6个月仅收取<em>###</em></dd>
</dl>
<dl class="actItem">
<dt class="actInfo">说明2</dt>
<dd>***</dd>
</dl>
</div>
<div class="showWrapper hide">
<dl class="actItem">
<dt class="actTitle">说明1</dt>
<dd>前3个月<em>###</em> 4-6个月仅收取<em>###</em></dd>
</dl>
<dl class="actItem">
<dt class="actInfo">说明2</dt>
<dd>***</dd>
</dl>
</div>
</div>
</div>
<script src="../test.js"></script>
</body>
</html>
2.2 css:
@charset "utf-8";
*{padding: 0;margin: 0;touch-action: pan-y;}
body{margin: 0 auto;font-family: Arial,Verdana,Sans-serif;font-size:.28rem;line-height: 1.5;color:#333;background:#fff;}
.flex{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content:space-between;justify-content:space-between}
.hide{display:none;}
.block_tab{text-align:center;font-size:.3rem;border-bottom:1px solid #eee;margin:0 .3rem;}
.block_tab p:first-child{text-align:left;}
.block_tab p:last-child{text-align:right;}
.block_tab span{display:inline-block;padding:.2rem;}
.block_tab .cur span{color:#0878ff;border-bottom:1px solid #0878ff;font-weight:600;}
.block_active .block_tabContent,.block_activeInfo{margin:.3rem;}
.actItem{margin:.3rem 0;}
.actItem dt{padding-left:.4rem;margin:.1rem 0;}
.actItem dd{text-indent:.4rem;}
.actItem dd em{color:#fd9858;}
.actItem dd i{color:#fa4444;}
.actItem .actTitle{background:url(../../../images/ico_hg.png) no-repeat left center/.34rem auto;}
.actItem .actInfo{background:url(../../../images/ico_xz.png) no-repeat left center/.34rem auto;}
2.3 js:
//控制页面布局
(function (doc, win) {
var docEl = doc.documentElement, //获取html标签
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100* (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
recalc();
})(document, window);
//tab切换
$(function () {
$(".block_tab").each(function () {
var iThis = $(this);
var tabDom = iThis.siblings(".block_tabContent");
iThis.find("p").click(function () {
$(this).addClass("cur").siblings().removeClass("cur");
var iIndex = $(this).index();
tabDom.children(".showWrapper").hide().eq(iIndex).show();
});
})
});
三.小结
本文主要通过使用jquery的遍历方法以及其他方法来控制样式,从而实现tab切换;