jquery获取当前元素索引值index()方法

1.当获取的点击元素为兄弟关系时，例如：

	<ul>
        <li class="tab-btn on">1</li>
        <li class="tab-btn">2</li>
        <li class="tab-btn">3</li>
    </ul>
    <ul>
        <li class="tab-con" style="display: block;">我是内容1</li>
        <li class="tab-con" style="display: none;">我是内容2</li>
        <li class="tab-con" style="display: none;">我是内容3</li>
    </ul>

		$(".tab-btn").click(function(){
            var index = $(this).index();
            //可以通过添加类名实现切换样式效果
            $(this).addClass('on').siblings().removeClass('on');
            //通过获取的类名，让对应的内容显示与隐藏
            $(".tab-con").hide().eq(index).show();
        })

2.当获取的点击元素为其他关系时，例如：

	<div>
        <a href="javascript:;" class="tab-btn">1</a>
    </div>
    <div>
        <a href="javascript:;" class="tab-btn">2</a>
    </div>
    <div>
        <a href="javascript:;" class="tab-btn">3</a>
    </div>
    
     <ul>
        <li class="tab-con" style="display: block;">我是内容1</li>
        <li class="tab-con" style="display: none;">我是内容2</li>
        <li class="tab-con" style="display: none;">我是内容3</li>
    </ul>

		$(".tab-btn").click(function(){
            var index = $(".tab-btn").index($(this));
            //可以通过添加类名实现切换样式效果
            $(this).addClass('on').siblings().removeClass('on');
             //通过获取的类名，让对应的内容显示与隐藏
            $(".tab-con").hide().eq(index).show()
        })