移动端 tab 页切换

最新推荐文章于 2025-05-18 10:25:50 发布

hp-future

最新推荐文章于 2025-05-18 10:25:50 发布

阅读量562

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42497122/article/details/108614419

前端专栏收录该内容

29 篇文章

订阅专栏

移动端 tab 页切换

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <title>tab切换</title>

</head>

<body>
  <div class="tab_box">
    <ul id="ul_box">
      <li class="tab_active" data-index="1">
        <span id="tab_1">检测数据</span>
      </li>
      <li class="no-underline" data-index="2">
        <span id="tab_2">通用物质</span>
      </li>
      <li class="no-underline" data-index="3">
        <span id="tab_3">试剂剩余量</span>
      </li>
      <li class="no-underline" data-index="4">
        <span id="tab_4">质控品</span>
      </li>
      <li class="no-underline" data-index="5">
        <span id="tab_5">质控数据</span>
      </li>
      <li class="no-underline" data-index="6">
        <span id="tab_6">质控图</span>
      </li>
      <li class="no-underline" data-index="7">
        <span id="tab_7">定标曲线</span>
      </li>
      <li class="no-underline" data-index="8">
        <span id="tab_8">异常信息</span>
      </li>
    </ul>
  </div>
  <div class="content_tab">
    <div id="con_tab1" class="con_active">检测数据</div>
    <div id="con_tab2" class="con_no_active">通用物质</div>
    <div id="con_tab3" class="con_no_active">实际剩余量</div>
    <div id="con_tab4" class="con_no_active">质控品</div>
    <div id="con_tab5" class="con_no_active">质控数据</div>
    <div id="con_tab6" class="con_no_active">质控图</div>
    <div id="con_tab7" class="con_no_active">定标曲线</div>
    <div id="con_tab8" class="con_no_active">异常信息</div>
  </div>
</body>
<script>
  $('li').click(function () {
    $(this).removeClass("no-underline").addClass("tab_active").siblings().addClass("no-underline").removeClass("tab_active")
    var index = Number($(this).attr('data-index'))
    $('#con_tab' + index).addClass("con_active").removeClass("con_no_active").siblings().addClass("con_no_active")
  })
</script>

</html>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
a,
div,
header,
span {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.tab_box {
    position: relative;
    height: 49px
}
.tab_box ul {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 49px;
    background-color: #fff;
}
.tab_box ul {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
.tab_box ul::-webkit-scrollbar {
    display: none;
    width: 0
}
.tab_box ul li {
    display: inline-block;
    width: 90px;
    height: 100%;
    overflow: hidden
}
.tab_box ul li span {
    font-size: 15px;
    padding: 0 3px;
    width: 100%;
    text-align: center;
    color: #000000;
    font-size: 14px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.tab_box ul .tab_active {
    border-bottom: 2px solid #000000;
    background-color: #f2f2f2;
}

.tab_box ul .tab_active span {
    font-weight: 700;
}

.tab_box ul .tab_active.no-underline {
    font-weight: 400;
    border-bottom: 0;
}

.content_tab {
    width: 100%;
    height: 900px;
}
.con_active{
    display: block;
}
.con_no_active{
    display: none;
}
#con_tab1{
    width: 100%;
    height: 100%;
    background-color: pink;
}
#con_tab2{
    width: 100%;
    height: 100%;
    background-color: red;
}
#con_tab3{
    width: 100%;
    height: 100%;
    background-color: green;
}
#con_tab4{
    width: 100%;
    height: 100%;
    background-color: yellow;
}
#con_tab5{
    width: 100%;
    height: 100%;
    background-color: orange;
}
#con_tab6{
    width: 100%;
    height: 100%;
    background-color: yellowgreen;
}
#con_tab7{
    width: 100%;
    height: 100%;
    background-color: blue;
}
#con_tab8{
    width: 100%;
    height: 100%;
    background-color: blueviolet;
}