게시판 목록화면에서 중복되는 클래스, 아이디

<style>

    ul {list-style:none;padding:0px;margin:0px;}   

    .tab li {border:1px solid red;width:100px;height:100px;}

    .tab li.on {background:blue}

 

    .conbox li{display:none;}

    .conbox li.on {display:block}

 

</style>

<div class="tab">

    <ul>

        <li data-id="con1" class="on"></li>

        <li data-id="con2"></li>

    </ul>    

</div>

 

<div class="conbox">

    <ul>

        <li id="con1" class="on">first box</li>

        <li id="con2">seconds box</li>

    </ul>

</div>


 

<script>

    $(function(){

       

        $(".tab ul li").click(function(){          

            $(".tab ul li").removeClass('on');

            $(".conBox li").removeClass('on');

            $(this).addClass('on');

            $("#"+$(this).data('id')).addClass('on');

        });

    });

</script>