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

html

  <ul>
        <li class="active">酒店</li>
        <li>机票</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ol>

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))
})