網站前端制作效果之TAB切換

　　網站制作中，有時候要實現鼠標點擊tab標簽，下面對應的內容要對應切換，選中的tab標簽有個選中的效果，效果如下圖所示：

　　tab標簽切換方式一：

　　css如下所示：

　　Html：

　　pclass=tabbox

　　pclass=tab

　　！----

　　pclass=tab-titletab-title-activeid=tab1onclick=show(3，1)

　　a國際市場營銷/a

　　/

　　pclass=tab-titleid=tab2onclick=show(3，2)

　　a技術法規顧問/a

　　/

　　pclass=tab-titleid=tab3onclick=show(3，3)

　　a海外資源引進/a

　　/

　　/

　　pclass=content

　　pclass=tab-contentid=content1

　　秉持代理服務理念，依托強大的海外營銷網絡，堅持高品質專業服務，將中國的優質原料藥、中間體、制劑、醫療用品等推廣到一帶一路國家及更多地區，幫助生產企業拓展海外市場，助力中國品牌國際化。

　　/

　　pclass=tab-contentid=content2style=display：none;

　　藥政專家團隊擁有數十年與美國FDA、EDQM和DCGI等監管機構溝通的專業經驗，提供CEP/COS，EU-GMP準備的技術咨詢。

　　/

　　pclass=tab-contentid=content3style=display：none;

　　開發全球供應商，為國內合作伙伴配置優質的海外資源。產品覆蓋原料藥、新型制劑、中間體、保健品等。

　　/

　　/

　　/

　　Js

　　script

　　functionshow(total，active){

　　for(vari=1;itotal+1;i++){

　　$(#tab+i).removeClass(tab-title-active);

　　$(#content+i).hide();

　　}

　　$(#tab+active).addClass(tab-title-active);

　　$(#content+active).show();

　　}

　　/script

　　tab標簽切換方式二

　　css：

　　html：

　　pclass=tabboxtwo

　　pclass=tab

　　pclass=tab-title國際市場營銷/

　　pclass=tab-title技術法規顧問/

　　pclass=tab-title海外資源引進/

　　/

　　pclass=content

　　pclass=tab-content

　　秉持代理服務理念，依托強大的海外營銷網絡，堅持高品質專業服務，將中國的優質原料藥、中間體、制劑、醫療用品等推廣到一帶一路國家及更多地區，幫助生產企業拓展海外市場，助力中國品牌國際化。

　　/

　　pclass=tab-content

　　藥政專家團隊擁有數十年與美國FDA、EDQM和DCGI等監管機構溝通的專業經驗，提供CEP/COS，EU-GMP準備的技術咨詢。

　　/

　　pclass=tab-content

　　開發全球供應商，為國內合作伙伴配置優質的海外資源。產品覆蓋原料藥、新型制劑、中間體、保健品等。

　　/

　　/

　　/

　　Js：

　　script

　　$(.tab.tab-title).on('click'，function(){

　　varindex=$(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