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

</p>

<p><style></p>

<p>    ul {list-style:none;padding:0px;margin:0px;}   </p>

<p>    .tab li {border:1px solid red;width:100px;height:100px;}</p>

<p>    .tab li.on {background:blue}</p>

<p> </p>

<p>    .conbox li{display:none;}</p>

<p>    .conbox li.on {display:block}</p>

<p> </p>

<p></style></p>

<p><div class="tab"></p>

<p>    <ul></p>

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

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

<p>    </ul>    </p>

<p></div></p>

<p> </p>

<p><div class="conbox"></p>

<p>    <ul></p>

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

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

<p>    </ul></p>

<p></div></p>

<p>

 </p>

<p><script></p>

<p>    $(function(){</p>

<p>       </p>

<p>        $(".tab ul li").click(function(){          </p>

<p>            $(".tab ul li").removeClass('on');</p>

<p>            $(".conBox li").removeClass('on');</p>

<p>            $(this).addClass('on');</p>

<p>            $("#"+$(this).data('id')).addClass('on');</p>

<p>        });</p>

<p>    });</p>

<p></script></p>

<p>