jq实现tab切换案例(经典)

html

  

        
酒店
        
机票
        
3
        
4
        
5
        
6
        
7
    
    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
    

css

 * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    ul {
        width: 70px;
        height: 350px;
        float: left;
    }

    ul li {

        width: 70px;
        height: 50px;
        border: solid 1px blue;
        box-sizing: border-box;
    }

    ol {
        float: left;
        height: 350px;
        width: 470px;
        border: 1px solid #ccc;
    }

    ol li {
        height: 350px;
        width: 470px;
        border: 1px solid #ccc;
        display: none
    }

//第一种方法加一个class名为active
    ul .active {
        background: yellow;
    }

    ol .active {
        display: block;
    }

js

第一种方法

  $("ul li").click(function () {
    var index = $(this).index();
    // console.log(index)
    $("ul li").removeClass("active");
    $(this).addClass('active')
    $("ol li").removeClass("active");
    $("ol li").eq(index).addClass("active");

    //   $(this).addClass('active')
    // console.log($(this))
  })

第二种方法

$("ul li").click(function () {
  var ind = $(this).index();
  // console.log(index)
  $("ul li").not(ind).css('background-color', 'white');  //给其他都设为初始的背景颜色
  $("ul li").eq(ind).css('background-color', 'red');//给点击的那个设为红色背景

  $("ol li").not(ind).hide()
  $("ol li").eq(ind).show();

  //   $(this).addClass('active')
  // console.log($(this))
})