網(wǎng)站制作中，有時候要實現(xiàn)鼠標點擊tab標簽，下面對應的內(nèi)容要對應切換，選中的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>技術(shù)法規(guī)顧問</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">
                      秉持代理服務理念，依托強大的海外營銷網(wǎng)絡，堅持高品質(zhì)專業(yè)服務，將中國的優(yōu)質(zhì)原料藥、中間體、制劑、醫(yī)療用品等推廣到“一帶一路”國家及更多地區(qū)，幫助生產(chǎn)企業(yè)拓展海外市場，助力中國品牌國際化。
        </div>
        <div class="tab-content" id="content2" style="display: none;">
                      藥政專家團隊擁有數(shù)十年與美國 FDA、EDQM 和 DCGI 等監(jiān)管 機構(gòu)溝通的專業(yè)經(jīng)驗，提供 CEP/COS, EU-GMP 準備的技術(shù)咨詢。
        </div>
        <div class="tab-content" id="content3" style="display: none;">
開發(fā)全球醫(yī)藥供應商，為國內(nèi)醫(yī)藥合作伙伴配置優(yōu)質(zhì)的 海外醫(yī)藥資源。產(chǎn)品覆蓋原料藥、新型制劑、中間體、 保健品等。
        </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">技術(shù)法規(guī)顧問</div>
<div class="tab-title">海外資源引進</div>
</div>
<div class="content">
<div class="tab-content">
秉持代理服務理念，依托強大的海外營銷網(wǎng)絡，堅持高品質(zhì)專業(yè)服務，將中國的優(yōu)質(zhì)原料藥、中間體、制劑、醫(yī)療用品等推廣到“一帶一路”國家及更多地區(qū)，幫助生產(chǎn)企業(yè)拓展海外市場，助力中國品牌國際化。
</div>
<div class="tab-content">
藥政專家團隊擁有數(shù)十年與美國 FDA、EDQM 和 DCGI 等監(jiān)管 機構(gòu)溝通的專業(yè)經(jīng)驗，提供 CEP/COS, EU-GMP 準備的技術(shù)咨詢。
</div>
<div class="tab-content">
開發(fā)全球醫(yī)藥供應商，為國內(nèi)醫(yī)藥合作伙伴配置優(yōu)質(zhì)的 海外醫(yī)藥資源。產(chǎn)品覆蓋原料藥、新型制劑、中間體、 保健品等。
</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>