CSS實戰篇 - tab切換

時間 2021-08-15 標籤 javascript css html java jquery web app ide 佈局 flex

一.效果圖

二.代碼之風

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切換;javascript