index() / text() / html() 매서드

 index() / text() / html() 매서드

HTML 

<article class="box">
    <p class="txt"></p>
</article>
<ul id="gnb">
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
    <li>메뉴4</li>
    <li>메뉴5</li>
    <li>메뉴6</li>
    <li>메뉴7</li>
    <li>메뉴8</li>
    <li>메뉴9</li>
    <li>메뉴10</li>
</ul>

jQuery 

$(function(){
    /* index() / text() / html() 매서드 */
    $('#gnb>li').on('click', function(){
        var i = $(this).index();
        $('.txt').text(i);
        $('.box').html("<h1>"+i+"<h1>")
    });
});