网站前端制作效果之TAB切换

网站制作中，有时候要实现鼠标点击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="tabboxtwo">
<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>


网站建设中的一些常见问题
关键词优化怎么才能获得好排名？
合肥网站建设方案都包含哪些内容？
网络推广——企业新站还得是专业网络推广公司来维护！
中小企业官网建设有哪些因素需要注意
点击全文阅读什么是SEO(搜索引擎优化)？(图)
Mysql字符串字段判断是否包含某个字符串的方法
UI设计是什么？4大主流UI设计行业介绍