jq实现简单的tab选项卡切换

首先上图，css可以自己添加修饰



html
ul标签li包裹的就是tab名，通过active来显示切换至哪一个标签
.nav-tabs-content包裹的是tab下对应的内容
整体思想是通过点击事件，获取点击的li是第几个，然后对相对应的.nav-tabs-content进行显示，其余的进行隐藏

<div class="nav-tabs-coupon">
    <ul class="nav-tabs-list">
         <li class="active">1</li>
         <li>2</li>
         <li>3</li>
    </ul>
</div>

<div class="nav-tabs-content">1</div>
<div class="nav-tabs-content">2</div>
<div class="nav-tabs-content">3</div>

css
首先对所有的.nav-tabs-content设置隐藏，其他的样式就自由发挥吧

    .nav-tabs-list {
	    padding-left: 0;
	}
    .nav-tabs-list li {
	    display: inline-block;
	    padding: 5px 20px;
	    background-color: #fafafa;
	}
	.nav-tabs-list li.active {
	    background-color: #aaa;
	}
	.nav-tabs-content {
	    display: none;
	}

js

$(document).ready(function() {
  $(".nav-tabs-content").eq(0).show();                 //将第一个内容显示
  $(".nav-tabs-list li").click(function(){
    var num =$(".nav-tabs-list li").index(this);      //获取点击li的索引
    $(".nav-tabs-content").hide();                    //隐藏所有内容
    $(".nav-tabs-content").eq(num).show();            //将内容对应索引显示
    $(this).attr("class","active");                   //对li点击元素添加active，来进行样式转换
    $(this).siblings().removeClass('active');
  })

})