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>