switch case문 기초 사용해 보기

switch cace 기초 활용코드

# 마크업
<ul id="orderTab">
    <li id="tabMenu_11"><a href="#none">메뉴 1111</a></li>
    <li id="tabMenu_12"><a href="#none">메뉴 2222</a></li>
    <li id="tabMenu_13"><a href="">메뉴 3333</a></li>
</ul>

<style>
    * {margin:0;padding: 0;}
    ul {list-style-type: none;overflow: hidden;}
    li {float: left;width: 100px;text-align: center;background-color: tan;padding: 10px;margin-right: 10px;}
    .aaa {border:2px solid red}
    .bbb {border:2px solid blue}
    .ccc {border:2px solid green}
</style>



<script>

    function tabMenuAct(menuId) {
        var menuNum = menuId.replace('tabMenu_','');
        //tabMenuStyle(menuId);

        switch(menuNum) {
            case '11' :
                $('#orderTab').removeClass().addClass('aaa');
                break;
            case '12' :
                $('#orderTab').removeClass().addClass('bbb');
                break;
            case '13' :
                $('#orderTab').removeClass().addClass('ccc');
                break;

        }

    }

    $(function(){
        $('li[id*=tabMenu_]').on('click',function(){
            tabMenuAct($(this).attr('id'));
        })
    });

</script>