jQuery实现tab选项卡

效果图如下

代码如下

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .tab{
            margin:0 auto;
        }
        .nav{
            height:20px;
            width:240px;
            background:yellow;
        }
        .nav>li{
            width:60px;
            height:20px;
            float:left;
            list-style:none;
            text-align:center;
            line-height:20px;
        }
        .nav .showtab{
            background:#ccc;
        }
        .content{
            width:240px;
            height:200px;
            background:red;
        }
        .content div{
            display:none;
        }
        .content .show-content{
            display:block;
        }
        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        
        $(function(){
            $('.nav>li').mouseenter(function(){                        //获取到所有的li，并且加入移入事件
                $('.nav>li').eq(0).removeClass('showtab');             //默认是第一个tab，这样是去除第一个tab样式，如果不加这行代码，鼠标直接移到tab2,3,4，tab1样式还在
                $('.content>div').eq(0).removeClass('show-content')    //上面同理
                $(this).addClass('showtab');                           //$(this)指鼠标进入的那个li的对象，给它添加一个样式
                var $index=$(this).index();                            //$(this).index()指下标，表示移到第几个tab，这样就可以与下面div对应，第一个tab对应第一个div

　　　　　　　　$('.content>div').eq($index).addClass('show-content')    //移到哪个tab，就给哪个div添加类
　　　　　　}) 
　　　　　　$('.nav>li').mouseleave(function(){                          //获取所有li，并且加入移除事件
　　　　　　　　$(this).removeClass('showtab');                           //当从一个tab移到另一个tab，需要把之前的tab样式给去除，回复原样
　　　　　　　　var $index=$(this).index(); 
　　　　　　　　$('.content>div').eq($index).removeClass('show-content')  //tab样式移除了，相应的div样式也需要移除
　　　　　　}) 
　　　　　　$('.nav').mouseleave(function(){                             //给整体的tab选项卡加个移除事件，如果不加，当鼠标不在tab里，发现tab和div都是没有选中
　　　　　　　　$('.nav>li').eq(0).addClass('showtab');                   //当鼠标移除选项卡，样式恢复到最初的模样
　　　　　　　　$('.content>div').eq(0).addClass('show-content') 
　　　　　　}) 
　　　　}) 
　　</script> 
<body> 
　　<div class="tab"> 
　　　　<ul class="nav"> 
　　　　　　<li class="showtab">tab1</li>
　　　　　　<li>tab2</li> 
　　　　　　<li>tab3</li>
　　　　　　<li>tab4</li>
 　　 </ul> 
　　  <div class="content">
 　　　　<div class="show-content">tab1</div> 
　　　　 <div>tab2</div> 
　　　　 <div>tab3</div> 
　　　　 <div>tab4</div> 
　　  </div> 
　　</div> 
　</body> 
</html>

jQuery实现tab选项卡

猜你喜欢