krzysztof-hellostudio
2/26/2013 - 1:51 PM

Reczne proste tabsy w js+jquery

Reczne proste tabsy w js+jquery

/*
tabsy
 */
    $('.templatespage-home-php .slider-nav a').click(function(){
        switch_tabs($(this));
    });
  /*next */
    $('.templatespage-home-php .prev-next .next').click(function(){
        if ($('.templatespage-home-php .slider-nav a.selected').next().length) {
            var next = $('.templatespage-home-php .slider-nav a.selected').next();
        } else {
            var next = $('.templatespage-home-php .slider-nav a').first();
        }
        switch_tabs(next);
    });
    /*prev*/
    $('.templatespage-home-php .prev-next .prev').click(function(){
        if ($('.templatespage-home-php .slider-nav a.selected').prev().length) {
            var prev = $('.templatespage-home-php .slider-nav a.selected').prev();
        } else {
            var prev = $('.templatespage-home-php .slider-nav a').last();
        }
        switch_tabs(prev);
    });


    switch_tabs($('.templatespage-home-php .slider-nav a').eq(0));

    function switch_tabs(obj)
    {
        $('.templatespage-home-php .slider .item-wrapper').hide();
        $('.templatespage-home-php .slider-nav a').removeClass("selected");
        var id = obj.attr("rel");

        $('.templatespage-home-php  #'+id).parent().parent().show();
        obj.addClass("selected"); 
    }
<div class="slider-nav-container">
    <div class="slider-nav">
        <a href="#" class="selected" rel="Codewise_1"></a>
        <a href="#" rel="Codewise_2"></a>
        <a href="#" rel="Codewise_3"></a>
        <a href="#" rel="Codewise_4"></a>
    </div>
</div>
<div class="prev-next">
    <div class="prev"><</div>
    <div class="next">></div>
</div>
<div class="slider">
    <div class="item-wrapper">
        <div class="item">
            <div id="Codewise_1" class="Codewise_1"></div>
        </div>
    </div>
    <div class="item-wrapper">
        <div class="item">
            <div id="Codewise_2" class="Codewise_2"></div>
        </div>
    </div>
    <div class="item-wrapper">
        <div class="item">
            <div id="Codewise_3" class="Codewise_3"></div>
        </div>
    </div>
    <div class="item-wrapper">
        <div class="item">
            <div id="Codewise_4" class="Codewise_4"></div>
        </div>
    </div>
</div>