텝 클릭시 하단 이미지 변경되는 css

웹디자인

텝 클릭시 하단 이미지 변경되는 css

깽아네 2018. 12. 6. 17:52

텝을 클릭했을때 하단 이미지가 바뀌는 소스 알려드립니다.

<스크립트>

<script>

$(function () {

tab('#tab',0);

});

function tab(e, num){

    var num = num || 0;

    var menu = $(e).children();

    var con = $(e+'_con').children();

    var select = $(menu).eq(num);

    var i = num;

    select.addClass('on');

    con.eq(num).show();

    menu.click(function(){

        if(select!==null){

            select.removeClass("on");

            con.eq(i).hide();

        }

        select = $(this);

        i = $(this).index();

        select.addClass('on');

        con.eq(i).show();

    });

}

</script>

<CSS>

ul,li { list-style:none; }
a { text-decoration:none; color:#000; }
.tab { height:100px; border-bottom:1px solid #555; background:#fff; overflow:hidden; }
.tab li { float:left; width:50%; text-align:center; box-sizing:border-box; }
.tab li { display:inline-block; cursor:pointer; }
.tab li.on { color:red; border-bottom:2px solid red; }
.tab_con { clear:both; margin-top:5px; border:1px solid #ddd; }
.tab_con div { display:none; height:100px; line-height:100px; text-align:center; }

<html>

<ul class="tab" id="tab">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div class="tab_con" id="tab_con">
<div>1st Contents</div>
<div>2nd Contents</div>
<div>3rd Contents</div>
</div>

저작자표시 비영리 동일조건 (새창열림)