标签切换 Tab
TAB是通过折叠信息紧凑展示页面内容,避免在有限的显示区域内展示过多信息的一种方式。根据信息和内容本身的属性,以及用户任务,对所有的信息和内容进行分类,而不减少网页的信息容量。
基本规范
  1. 可以使用 tabs 来切换不同的表格,不可以在表格内使用 tabs。
  2. 避免超过 2 层的 Tabs。
示例 Examples
我的意向职位 & 我的立项职位 & 我的同事 & 开票管理 等
基本属性:height:40px; color:#333; padding:0 20px; display:inline-block; line-height:40px; margin-right:10px; font-size:14px;
已选中:background: #00b29c; color:#fff;
未选中:background:none;color:#333
未选中hover:color:#00b29c;
除了我的意向职位 & 我的立项职位,还有“标签库”、“标签跟进设置”、“修改密码”、“我的积分”、“我的同事”、“开票管理”、“KPI报表”、“成单报表”、“系统消息”、“公告”这几个页面都要调整到这个样式,就算只有一个头的(没Tab),也要这个样式
基本属性:padding: 7px 20px; color: #333; border: 1px solid #ddd; float: left; line-height:24px; margin-right: 5px; text-align: center; 
border-radius: 3px 3px 0 0; cursor: pointer;

已选中/已选中hover:background: #fafafa; border-bottom: 1px solid #fafafa;
未选中hover:color:#00b29c;
基本属性:padding: 8px 30px; color: #333; border: 1px solid #ddd; float: left; margin-right: 5px; text-align: center; 
border-radius: 3px 3px 0 0; cursor: pointer;

已选中/已选中hover:background: #fafafa; border-bottom: 1px solid #fafafa;
未选中hover:color:#00b29c;
基本属性:font-size: 16px;color: #333;display: block;padding: 10px 20px;margin: 0;
未选中hover:color:#00b29c;
.info-nav{background: url(images/icon-02.png) left top no-repeat; padding-top: 10px; margin-left: 3px;width:160px;}
.mm-tabs5{background: url(images/icon-02.png) left bottom no-repeat;padding-left: 4px; padding-bottom: 10px;}
.mm-tabs5 li{ border-left: 2px solid #eaeaea; white-space: nowrap;}
.mm-tabs5 li a{ color:#333; height:36px; line-height:36px; background:url(images/icon-03.png) left center no-repeat;display: block;padding-left: 23px;margin-left: -6px;}
.mm-tabs5 li a:hover{color: #00b29c;}
.mm-tabs5 li.active a{color: #00b29c;background: url(images/icon-01.png) left 10px no-repeat;margin-left: -8px; padding-left: 25px;}