问题:我们网站的每一个页面或者app页面 都会有tab切换,在前端开发是必须会的,这里总结了几条快速包装好的方法直接可以拿来用的tab切换, 如图:
图1
图2
方案一:
1.CSS内容
<style>
body{ margin:0; padding:0;}
ul,li{ margin:0; padding:0; list-style:none;}
.tab-box{ width:400px; margin:100px auto;}
.tab-box ul{ height:40px;background: #ededed;}
.tab-box ul li{ float:left; width:100px; color:#666; text-align:center; line-height:40px;}
.tab-box ul li:hover{cursor: pointer;}
.tab-box ul li.active{ color:#F60; border-bottom:solid 2px #FF6600;}
.list-con{ border: 1px solid #ededed; height: 200px;clear: both;line-height: 100px;font-weight: bold;border-top: none}
.list-con div{ color:#666;text-align: center; font-size: 20px;}
.list-con div.text{ display:none;}
</style>
2 .HTML内容
<div class="tab-box" id="box">
<ul id="tab-title">
<li class="active">jquery</li>
<li>html</li>
<li>css</li>
<li>ajax</li>
</ul>
<div class="list-con" id="list-con">
<div class="text" style="display:block;">我是tab1</div>
<div class="text">我是tab2</div>
<div class="text">我是tab3</div>
<div class="text">我是tab4</div>
</div>
</div>
3.JS内容
<script>
(function($){
$.fn.myTab = function(options){//将对象作为参数传进去
var setting = options;
if(setting.method == 0){
$(this).find("li").on("click",function(){
var $this=$(this);
var $index =$this.index();
$this.addClass("active").siblings().removeClass("active");
$(setting.parent).children("div").eq($index).show().siblings().hide();//切换标签对应的内容
})
}
if(setting.method == 1){
$(this).find("li").on("mouseover",function(){
var $this=$(this);
var $index =$this.index();
$this.addClass("active").siblings().removeClass("active");
$(setting.parent).children("div").eq($index).show().siblings().hide();//切换标签对应的内容
})
}
}
})(jQuery)
//引用
$("#tab-title").myTab({parent:"#list-con",method:0}) //传id 选择鼠标滑过还是点击效果
</script>
方案二:
1.HTML内容:
<ul class="map-tab clearfix">
<li class="on" id="city_bj">北京</li>
<li id="city_cd">成都</li>
<li id="city_gz">广州</li>
</ul>
<div class="map-info" id="info_bj">...</div>
<div class="map-info hide" id="info_cd">...</div>
<div class="map-info hide" id="info_gz">...</div>
2.JS内容
$(".map-tab").on("click","li",function(){
var _this = $(this);
flags = _this.attr("id").slice(-2);
$(".about-map").removeClass(Flags).addClass(flags);
_this.addClass("on").siblings().removeClass("on");
$("#info_"+flags).removeClass("hide").siblings(".map-info").addClass("hide");
Flags = flags;
});