제이쿼리 자동 롤링 탭메뉴 관련 질문좀.. 채택완료

광깔 7년 전 조회 4,518

</p>

<p><!DOCTYPE HTML>

<html lang="ko">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

    <title>snippet</title>

    <style type="text/css">

    /* reset */

    * {margin:0;padding:0}

    fieldset,img {border:0 none}

    dl,ul,ol,menu,li {list-style:none}

    blockquote, q {quotes:none}

    blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}

    input,select,textarea,button {vertical-align:middle}

    button {border:0 none;background-color:transparent;cursor:pointer}

    body {/*background:#333;*/}

    body,th,td,input,select,textarea,button {font-size:12px;line-height:1.5;font-family:'Malgun Gothic','맑은 고딕',sans-serif;color:#000}

    a {color:#000;text-decoration:none}

    address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}

    table {border-collapse:collapse;border-spacing:0}

    img {vertical-align:top}

    .piece {

        /*min-width:300px;max-width:600px;padding:10px;margin:10px;background:#fff;*/

        width: 1020px; margin: 50px auto;

        }</p>

<p>    </style>

    <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script></a></p>

<p>    <script>

    $(document).ready (function () {

        $('.jq_onoff .jq_hide').css('display', 'none');

        $('.jq_autoonoff .jq_hide').css('display', 'none');</p>

<p>        //탭(ul) onoff(auto)

        $('.jq_tabonoff_auto .jq_cont').children().css('display', 'none');

        $('.jq_tabonoff_auto .jq_cont div:first-child').css('display', 'block');

        $('.jq_tabonoff_auto .jq_tab li:first-child').addClass('on');

        function tabonoff(o) {

            var index = $('.jq_tabonoff_auto .jq_tab li').index(o);

            $(o).siblings().removeClass();

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

            $(o).parent().next('.jq_cont').children().slideUp('fast').eq(index).slideDown('fast');

        }

        (function(a){

            a.fn.tabonoff_auto=function(p){

                var s_t_i=p&&p.scroller_time_interval?p.scroller_time_interval:"10000"; //롤링타임 수정가능

                var dom=a(this); 

                var s_length=dom.length; 

                var timer; 

                var current = 0; begin(); play();

                function begin(){

                    dom.click(function(){current = dom.index($(this)); play(); stop()});

                    dom.parent().parent().hover(function(){stop();},function(){timer = setTimeout(play,s_t_i);});

                }

                function stop(){clearTimeout(timer);}

                function play(){

                    clearTimeout(timer); tabonoff(dom[current]);

                    if(current >= s_length-1){current = 0;} else{current ++;}

                    timer = setTimeout(play,s_t_i);

                }

            }

        })(jQuery);

        $(".jq_tabonoff_auto li").tabonoff_auto();

    });

    </script></p>

<p></head>

<body></p>

<p><div class="piece">

<!--    <h2>리스트(ul) tabonoff(auto)</h2>-->

    <!-- //탭(ul) tabonoff(auto) -->

    <style type="text/css">

        .tab_menu {/*width:100%;display:table; border:1px solid #ccc;*/ width: 800px; float: right; text-align: right}

        .tab_menu li {/*display:table-cell;border-left:1px solid #ccc;text-align:center*/ float: right; padding: 10px 20px;}

        .tab_menu li:first-child {/*border-left:0 none*/}

        .tab_menu .tit {display:block;/*padding:5px;*/color:#404040;/*background-color:#ededed;*/cursor:pointer}

        .tab_menu .on .tit {/*color:#fff; background-color:#27b600*/ color: #d91b1b}

        .tab_cont {/*padding:5px;margin-top:5px;border:1px solid #d5d5d5;border-radius:5px*/ margin: 20px 0 0}

        .h1_css {width: 200px; display: inline}

    </style>

    <div class="jq_tabonoff_auto">

        <h1 class="h1_css">트렌드</h1>

        <ul class="jq_tab tab_menu">

            <li><strong class="tit">menu4</strong></li>

            <li><strong class="tit">menu3</strong></li>

            <li><strong class="tit">menu2</strong></li>

            <li><strong class="tit">menu1</strong></li>

        </ul>

        <div class="jq_cont tab_cont">

            <div class="cont"><img src="images/m_trand4.jpg"></div>

            <div class="cont"><img src="images/m_trand3.jpg"></div>

            <div class="cont"><img src="images/m_trand2.jpg"></div>

            <div class="cont"><img src="images/m_trand1.jpg"></div>

        </div>

    </div>

    <!-- 탭(ul) tabonoff(auto)// -->

</div></p>

<p>

</body>

</html></p>

<p>

https://jsfiddle.net/eond/fn3kqur2/1/

위 url에 적힌 사이트에서 틀만 살짝 바꿔 사용할려고 하는데..

menu1,menu2,menu3,menu4 부분을 li = float:right 로 설정을 하니

menu4번 부터 실행이 됩니다 ㅠㅠㅠ

위 코드에서 menu1번부터 실행될 수 있게 하려면

어떻게 수정을 해야 할까요?? 전문가 분들 부탁드립니다

#그누보드5 #제이쿼리

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

정렬:

bonobono

7년 전

li에 float:right 빼고 display:inline-block 넣고

li순서 다시 올바르게 해보세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

�

광깔

7년 전

작업을 오른쪽 라인에 맞출려고 li를 float:right 로 작업한 부분이고 해결할 방법을 찾기 위해 문의 글을 남긴거에요

bonobono

7년 전

상위 ul 에 text-align:right를 주셔서 오른쪽 라인에 맞춰집니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

제이쿼리 자동 롤링 탭메뉴 관련 질문좀.. 채택완료

답변 1개

답변에 대한 댓글 2개

공유하기