关于tab切换一些方法总结

问题：我们网站的每一个页面或者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;

 });