big tab

bigtab.coffee

$ ->
  #tab
  $(".cards").on 'click', '.tab-title', (e)->
    $tab = $ e.currentTarget
    $target = $ $tab.data 'target'
    $(".tab-title.active").removeClass 'active'
    $tab.addClass 'active'
    $(".tab-body.active").removeClass 'active'
    $target.addClass 'active'

bigtab.html

<div class="cards-wrap">
  <div class="cards clearfix">
    <div class="tab-title card" data-target=".tab-body-1">
          <div class="card-inner">
            <div class="card-content">
              <h3>全网</h3>
              <div class="details">
                <ul class="unstyled">
                  <li>品牌成交金额<strong>￥12345</strong></li>
                  <li>品牌成交环比<a href="#">40%</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      
    <div class="tab-title card active" data-target=".tab-body-2">
          <div class="card-inner">
            <div class="card-content ">
              <h3>品牌渠道内</h3>
              <div class="details">
                <ul class="unstyled">
                  <li>品牌成交金额<strong>￥12345</strong></li>
                  <li>品牌成交环比<a href="#">40%</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      
    <div class="tab-title card " data-target=".tab-body-3">
          <div class="card-inner">
            <div class="card-content ">
              
              <h3>品牌渠道外</h3>
              <div class="details">
                <ul class="unstyled">
                  <li>品牌成交金额<strong>￥12345</strong></li>
                  <li>品牌成交环比<a href="#">40%</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      
  </div> 
</div>

bigtab.less

.cards-wrap {
  border: 1px solid #e8e8e8;
  border-top: 0;
  .cards {
    .card {
      float: left;
      width: 33.33%;
      + .card {
        .card-inner {
          border-left: 1px solid #e8e8e8;
        }
      }
    }
    .card-inner {
      background: #fbfbfb;
      padding: 15px 0;
      border-bottom: 1px solid #e8e8e8;
      border-top: 1px solid #e8e8e8;
      text-align: center;
      overflow: hidden;
      padding-top: 3px; //由于border不同会带来位置移动，用padding来补齐
    }
    .active {
      .card-inner {
        background: #fff;
        border-bottom: 0;
        border-top: 4px solid #3096dc;
        padding-top: 0;
      }
    }
    .card-content {
      width: 160px;
      margin: auto;
      padding: 25px 0;
    }
    .details {
      margin: 12px 0;
      ul {
        text-align: left;
        li {
          margin-bottom: 12px;
        }
      }
      strong, a {
        vertical-align: middle;
        margin-left: 8px;
      }
      a {
        color: #4ac;
      }
    }
  }