jqtab 전환 사례 구현 (고전)

  

        
  
        
  
        
3
        
4
        
5
        
6
        
7
    
    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
    

 * {
        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;
    }

  $("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))
})