中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)站前端制作效果之TAB切換

2023-02-24    分類: 網(wǎng)站建設(shè)

網(wǎng)站制作中,有時候要實現(xiàn)鼠標(biāo)點擊tab標(biāo)簽,下面對應(yīng)的內(nèi)容要對應(yīng)切換,選中的tab標(biāo)簽有個選中的效果,效果如下圖所示:

切換效果

tab標(biāo)簽切換方式一:
CSS代碼
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ù)理念,依托強大的海外營銷網(wǎng)絡(luò),堅持高品質(zhì)專業(yè)服務(wù),將中國的優(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 準(zhǔn)備的技術(shù)咨詢。
</div>
<div class="tab-content" id="content3" style="display: none;">
開發(fā)全球醫(yī)藥供應(yīng)商,為國內(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標(biāo)簽切換方式二
css:
html:
<div class="tabboxtwo">
<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ù)理念,依托強大的海外營銷網(wǎng)絡(luò),堅持高品質(zhì)專業(yè)服務(wù),將中國的優(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 準(zhǔn)備的技術(shù)咨詢。
</div>
<div class="tab-content">
開發(fā)全球醫(yī)藥供應(yīng)商,為國內(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>

本文題目:網(wǎng)站前端制作效果之TAB切換
本文路徑:http://m.rwnh.cn/news16/239316.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)建站公司、品牌網(wǎng)站設(shè)計、營銷型網(wǎng)站建設(shè)、App設(shè)計品牌網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司
广汉市| 临沂市| 云龙县| 黄山市| 自治县| 内乡县| 丽江市| 微博| 六安市| 淮南市| 梨树县| 洛阳市| 宜兰县| 湟源县| 丹江口市| 蒙自县| 安乡县| 正安县| 酉阳| 桐柏县| 墨江| 迁西县| 九台市| 博罗县| 河北省| 青冈县| 武穴市| 密山市| 临汾市| 元氏县| 通榆县| 衡阳县| 云梦县| 固原市| 财经| 增城市| 丹棱县| 台江县| 安康市| 阳原县| 大冶市|