tabMaker.js

탭메뉴를 간단히 구현하는 플러그인

샘플영상

다운로드

tabMaker.js 다운로드

설치/사용법

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/tabMaker.js"></script>

<style>
    #tab ul:nth-child(1) li{text-align:center; width:25%; float:left; padding:10px 0px;}
    #tab ul:nth-child(2) li{min-height:300px;}
</style>

<script>
    $(function(){
        $('#tab').tabMaker();
    });
</script>

<body>
    <div id="tab">
        <ul>
            <li style="background:red;">버튼1</li>
            <li style="background:green;">버튼2</li>
            <li style="background:blue;">버튼3</li>
            <li style="background:yellow;">버튼4</li>
        </ul>
        <ul>
            <li style="background:red;">콘텐츠1</li>
            <li style="background:green;">콘텐츠2</li>
            <li style="background:blue;">콘텐츠3</li>
            <li style="background:yellow;">콘텐츠4</li>
        </ul>
    </div>
</body>

 

1. 제이쿼리가 연결되어 있어야 합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/tabMaker.js"></script>

<style>
    #tab ul:nth-child(1) li{text-align:center; width:25%; float:left; padding:10px 0px;}
    #tab ul:nth-child(2) li{min-height:300px;}
</style>

<script>
    $(function(){
        $('#tab').tabMaker();
    });
</script>

<body>
    <div id="tab">
        <ul>
            <li style="background:red;">버튼1</li>
            <li style="background:green;">버튼2</li>
            <li style="background:blue;">버튼3</li>
            <li style="background:yellow;">버튼4</li>
        </ul>
        <ul>
            <li style="background:red;">콘텐츠1</li>
            <li style="background:green;">콘텐츠2</li>
            <li style="background:blue;">콘텐츠3</li>
            <li style="background:yellow;">콘텐츠4</li>
        </ul>
    </div>
</body>

 

2. 다운로드 받은 플러그인을 설치한 경로를 지정해 줍니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/tabMaker.js"></script>

<style>
    #tab ul:nth-child(1) li{text-align:center; width:25%; float:left; padding:10px 0px;}
    #tab ul:nth-child(2) li{min-height:300px;}

</style>

<script>
    $(function(){
        $('#tab').tabMaker();
    });
</script>

<body>
    <div id="tab">
        <ul>
            <li style="background:red;">버튼1</li>
            <li style="background:green;">버튼2</li>
            <li style="background:blue;">버튼3</li>
            <li style="background:yellow;">버튼4</li>
        </ul>
        <ul>
            <li style="background:red;">콘텐츠1</li>
            <li style="background:green;">콘텐츠2</li>
            <li style="background:blue;">콘텐츠3</li>
            <li style="background:yellow;">콘텐츠4</li>
        </ul>
    </div>

</body>

 

3. 기본 html 태그 및 스타일을 추가해 줍니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/tabMaker.js"></script>

<style>
    #tab ul:nth-child(1) li{text-align:center; width:25%; float:left; padding:10px 0px;}
    #tab ul:nth-child(2) li{min-height:300px;}
</style>

<script>
    $(function(){
        $('#tab').tabMaker();
    });
</script>

<body>
    <div id="tab">
        <ul>
            <li style="background:red;">버튼1</li>
            <li style="background:green;">버튼2</li>
            <li style="background:blue;">버튼3</li>
            <li style="background:yellow;">버튼4</li>
        </ul>
        <ul>
            <li style="background:red;">콘텐츠1</li>
            <li style="background:green;">콘텐츠2</li>
            <li style="background:blue;">콘텐츠3</li>
            <li style="background:yellow;">콘텐츠4</li>
        </ul>
    </div>
</body>

 

4. 페이지가 실행되면 동시에 실행될 수 있는 위치에 함수를 위치 시킵니다.

 

 

 

 





! 플러그인 설치 및 수정은 견적문의 해주세요.