JQuery案例-tab栏切换

<div class="navs">
  <span class="nav active">抽烟</span>
  <span class="nav">喝酒</span>
  <span class="nav">烫头</span>
</div>
<ul class="tabs">
  <li class="tab active">烟要一口一口抽</li>
  <li class="tab">酒要一口一口喝</li>
  <li class="tab">步子迈的太大,容易受伤</li>
</ul>
<script>
  $(function () {
    // 通过添加类名来操作样式
    $('.nav').on('click', function () {
      var curentNav = $(this).addClass('active');
      curentNav.siblings().removeClass('active');

      // inde()方法获取下标 让tab跟着变
      // 获取下标,获取的是相对于[父级]的子元素第几个的下标
      var index = $(this).index();
      var currentTab = $('.tab').eq(index).addClass('active');
      currentTab.siblings().removeClass('active');

      // 极简版
      //$(this).addClass('active').siblings().removeClass('active');
      //$('.tab').eq($(this).index()).addClass('active').siblings().removeClass('active');
      // 链式调用
      // var a = $('.box').css('background', 'skyblue')
      // console.log(a)

      // var b = a.html('动态添加的文本');
      // console.log(b);

      // var c = b.css('color', '#fff');
      // console.log(c)

      // 这种可以一直被.语法调用下去的叫链式调用
      // 本质上是每次调用方法的返回值是jquery对象本身
      // $('.box').css('background', 'skyblue').html('动态内容').css('color', 'red');
    })

  })
</script>