网站制作中，有时候要□□□□实现鼠标□□□点击tab标签，下面对应☆的内容要□□□□对应切换，选中的tab标签有个◎选中的效□□果，效果如下丨图所示：
 

tab 标签切换方式一：
css如下所示：


 
Html：
<div class="tabbox">
    <div class="tab">
     <!---->
        <div class="tab-title tab-title-active" id="tab1" onclick="show(3,1)">
            <a>国际市场营销</a>
        </div>
        <div class="tab-title" id="tab2" onclick="show(3,2)">
            <a>技术法规顾问</a>
        </div>
        <div class="tab-title" id="tab3" onclick="show(3,3)">
            <a>海外资源引进</a>
        </div>
    </div>
    <div class="content">
        <div class="tab-content" id="content1">
                      秉持代理▽服务理念，依托强大□□的海外营◥销网络，坚持高品□□质专业服□□□□务，将中国的□□□□优质原料·药、中间体、制剂、医疗用品□□等推广到“一带一路”国家及更◢多地区，帮助生产□□□□企业拓展▼海外市场，助力中国△品牌国际◎化。
        </div>
        <div class="tab-content" id="content2" style="display: none;">
                      药政专家□□团队拥有※数十年与□□美国 FDA、EDQM 和 DCGI 等监管 机构沟通◣的专业经□□□□验，提供 CEP/COS, EU-GMP 准备的技♦术咨询。
        </div>
        <div class="tab-content" id="content3" style="display: none;">
开发全球□□□□医药供应□□□商，为国内医□□□□药合作伙□□□伴配置优□□质的 海外医药□□资源。产品覆盖★原料药、新型制剂、中间体、 保健品等。
        </div>
    </div>
</div>
Js
<script>
function show(total,active){
    for(var i=1;i<total+1;i++){
        $("#tab"+i).removeClass("tab-title-active");
        $("#content"+i).hide();
    }
    $("#tab"+active).addClass("tab-title-active");
    $("#content"+active).show();
}
</script>
 
tab 标签切换方式二
css:
 
html:
<div class="tabbox  two">
<div class="tab">
<div class="tab-title">国际市场营销</div>
<div class="tab-title">技术法规顾问</div>
<div class="tab-title">海外资源引进</div>
</div>
<div class="content">
<div class="tab-content">
秉持代理□□□□服务理念，依托强大□□□的海外营□□□□销网络，坚持高品□□□质专业服□□□□务，将中国的▽优质原料□□□□药、中间体、制剂、医疗用品□□□□等推广到“一带一路”国家及更□□□多地区，帮助生产•企业拓展□□□□海外市场，助力中国•品牌国际□□化。
</div>
<div class="tab-content">
药政专家□□□团队拥有□□□□数十年与□□□美国 FDA、EDQM 和 DCGI 等监管 机构沟通□□的专业经◢验，提供 CEP/COS, EU-GMP 准备的技▲术咨询。
</div>
<div class="tab-content">
开发全球◢医药供应□□□□商，为国内医◈药合作伙◎伴配置优□□□□质的 海外医药□□资源。产品覆盖○原料药、新型制剂、中间体、 保健品等。
</div>
</div>
</div>
Js:
<script>
$(".tab .tab-title").on('click',function(){
var index = $(this).index();
$(this).addClass("tab-title-active").siblings().removeClass("tab-title-active");
$('.tab-content').eq(index).addClass('on').siblings('.tab-content').removeClass('on')
}).eq(0).click();
</script>