公司网站常用tab结构以及样式

README.md

###演示

http://jsfiddle.net/lyplba/6ezx2zoz/

###注意

1、在用于生产环境时，请确保进行了浏览器默认样式的清理工作(比如常用的reset.css)

2、这里的标签切换只是提供基本的表现（未带相应交互效果），根据需要可以通过外挂其他样式名来更改

3、需要带上js的时候，最好通过加上诸如**.js_tab**, .j_tab,这样的钩子

4、使用box-sizing时，请重新调整样式

tab.css

/* 通用tab样式 */
.tab { background-color: #fff; border: 1px solid #ccc; box-shadow: 0px 1px 3px 0px rgba(204,204,204,0.75); }

.tab_control { background-color: #f7f7f7; border-bottom: 1px solid #ccc; height: 41px; }

.tab_control_item { float: left; height: 40px; line-height: 40px; text-align: center; width: 150px; border-left: 1px solid #f7f7f7; border-right: 1px solid #f7f7f7; padding-top: 1px; }

.tab_control_item a { font-size: 16px; color: #525252; }

.tab_control_item.active { background-color: #fff; border-top: 2px solid #f60; border-left-color: #ccc; border-right-color: #ccc; margin-top: -1px; margin-left: -1px; padding-top: 0; height: 41px; }

.tab_control_item.active a { color: #f60; font-weight: bold; }

.tab_bd { background-color: #fff; clear: both; }

.tab_con { display: none; }

.tab_con.active { display: block; }

tab.html

<div class="tab channel_tab">
    <div class="tab_hd">
        <ul class="tab_control clearfix">
            <li class="tab_control_item active"><a href="#">TabNameA</a></li>
            <li class="tab_control_item"><a href="#">TabNameB</a></li>
        </ul>
    </div>
    <div class="tab_bd">
        <!-- tc_1 -->
        <div class="tab_con active"></div>
        <!-- tc_2 -->
        <div class="tab_con"></div>
    </div>
</div>

tab_special.css

/* 专用tab样式 */
.channel_tab .tab_control_item a { width: 150px; }

.channel_tab .tab_bd { padding: 40px; }