专注WEB开发 分享经验,沉淀知识

tab页面的布局和效果实例(一)

 作者:chenxing  时间:2018-01-31 18:53  阅读:541  评论:

上图是我项目中的一个tab页面布局,先看看布局代码

tab布局在页面的应用是非常常见,如下效果图:

tab布局效果图

上图是我项目中的一个tab页面布局,先看看布局代码:

  1. 页面html布局
    
    <div class="tab">
    o<ul class="tab-title">
    o<li class="tb-active">充卡</li>
    o<li class="">进卡</li>
    o<li class="">客服赠送</li>
    o<li class="">系统赠送</li>
    o</ul>
    o<div id="giveCard" class="tab-content active">
    o<div class="total">共充卡<span class="total-value">0</span>张</div>
    o<ul class="content-ul">

o o

加载更多
o
o
o o

    o

o
加载更多
o
o
o

    o

o
o
o
    o
  • 暂无数据O(∩_∩)O
  • o
o


2. css代码(less代码,可以使用工具其转换为css)

```javascript

.tab{
  padding: 1rem;
  .tab-title{
    display: flex;
    justify-content: center;
    text-align: center;
    li{
      width: 100%;
      padding: 1rem;
      border-bottom: 1px solid #eeeeee;
    }
    .tb-active{
      border-bottom: 1px solid #0BA18E;
    }
  }

  .tab-content{
    width: 100%;
    padding: 1rem 0rem;
    display: none;
    table{
      width: 100%;
    }
    .table-t{
      display: flex;
      justify-content: center;
      text-align: center;
      th,td{
        width: 100%;
      }
      td{
        line-height: 2.5rem;
      }
    }
    .total{
      text-align: center;
      padding: 1rem 0rem;
      span{
        color: red;
      }
    }
    .content-ul{
      width: 100%;
      li{
        padding: 1rem;
        border-bottom: 1px solid #eeeeee;
        display: flex;
        justify-content: space-between;
        .li-desc{
          p:first-child{
            color: #999;
        }
          p:last-child{
            color: #999;
          }
        }
      }
      li:last-child{
        border-bottom: none;
      }

    }
    .more-data{
      text-align: center;
      display: none;
    }
  }

  .active{
    display: block;
  }

}
  1. javascript效果切换部分。
$('.tab-title li').click(function () {
    var index = $(this).index();
    $(this).siblings().removeClass('tb-active');
    $(this).addClass('tb-active');
    $('.tab-content').removeClass('active');
    $('.tab-content').eq(index).addClass('active');
})

以上tab页面布局和js效果部分代码。

除特别注明外,本站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 http://www.qiusuoweb.com/123.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

相关阅读

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

阿里开发mysql规范手册(阅读整理)

 2021-09-30 15:27  86

如何一次性推送百万级别的消息

 2021-02-26 17:57  331

redis set集合取出一组数据并删除

 2021-02-26 12:50  567

一年时间又回到这里

 2019-07-27 16:54  430

 最新评论

 诚心: 09月29日 23:01
学到了
来源: 如何一次性推送百万级别的消息
 Nick: 04月14日 12:26
网上的资料还是太老,都只是取一个元素,解决了一大难题
来源: redis set集合取出一组数据并删除
 skywalker: 11月03日 18:21
简洁明了
来源: mysql 获取某个日期的前一天或后一天
 lisheng: 05月09日 19:26
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里