티스토리 뷰

JQuery 예제- 네이버 검색창 밑에 있는 검색목록 만들기



오늘은 JQuery를 이용해서 네이버 검색창 밑에 있는 검색목록을 만들어 보도록 하겠습니다.

바로 아래 그림에 있는 빨간 부분이 오늘 만들어 볼 예제입니다.

 


아래와 같이 소스를 입력합니다


    
<!DOCTYPE html>
<html>
    <head>
        <title> sjisbmoc </title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script language='javascript' type='text/javascript'>
//<![CDATA[

var pos = 0;

function fncView(prm)
{
    var dvs = $('div.ldiv')
    pos += prm;
    if(pos>=dvs.length) pos = 0;
    else if(pos<0) pos=dvs.length-1;

    for(var i=0; i<dvs.length; i++)
    {
        if(i==pos) $(dvs[i]).css('display','block');
        else $(dvs[i]).css('display','none');
    }
}

//]]>
</script>
<style type='text/css'>
div.ldiv {font-size:12px; float:left; padding-left:5px; padding-right:5px; width:150px;}
</style>
    </head>
    <body>

        <div>
            <div class='ldiv'>운영체제(OS)</div>
            <div class='ldiv' style='display:none;'>프로그래밍</div>
            <div class='ldiv' style='display:none;'>웹사이트 제작, 운영</div>
            <div class='ldiv' style='display:none;'>컴퓨터네트워크</div>
            <div class='ldiv' style='display:none;'>데이터베이스</div>
            <div class='btn'>
                <img src='http://static.naver.net/kin/09renewal/btn_badge_prev.gif' onclick='fncView(-1)' style='cursor:pointer' />
                <img src='http://static.naver.net/kin/09renewal/btn_badge_next.gif' onclick='fncView(1)' style='cursor:pointer' />
            </div>
        </div>

    </body>
</html>


출처 : 네이버 지식인 태양신 sjisbmoc님의 답변  (구체적인 페이지 주소는 잘 모르겠네요)
댓글
댓글쓰기 폼
공지사항
Total
3,559,084
Today
73
Yesterday
590
«   2021/12   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
글 보관함