Табы для Подхода — Александр Браун, смена цвета

В списке табов любое содержание. В просмотре любое содержание. С прокруткой по клику.

by vovkasolovev

HTML

<div class="tabmenu">
    <ul id="tabs">
        <li><a class="white-color active">&nbsp;</a></li>
        <li><a class="gray-color">xdfvsd</a></li>
        <li><a class="violet-color">&nbsp;</a></li>
        <li><a class="dark-color"> dfgsdfg</a></li>
    </ul>

    <div id="tab-content">
        <div id="tab1" style="width:750px; height:846px; background: url('http://podhod.ru/images/abraun/abraun-main.jpg') 0 0 no-repeat; margin: 1em auto;"></div>
        <div id="tab2" style="width:750px; height:846px; background: url('http://podhod.ru/images/abraun/abraun-main.jpg') -750px 0 no-repeat; margin: 1em auto;"></div>
        <div id="tab3" style="width:750px; height:846px; background: url('http://podhod.ru/images/abraun/abraun-main.jpg') -1500px 0 no-repeat; margin: 1em auto;"></div> 
        <div id="tab4" style="width:750px; height:846px; background: url('http://podhod.ru/images/abraun/abraun-main.jpg') -2250px 0 no-repeat; margin: 1em auto;"></div>     
    </div>
</div>


<table class="image_comment"><tr><td>

<ul id="tabs">
        <li><a class="white-color active">&nbsp;</a></li>
        <li><a class="gray-color">xdfvsd</a></li>
        <li><a class="violet-color">&nbsp;</a></li>
        <li><a class="dark-color"> dfgsdfg</a></li>    
    </ul>
    
    
</td><td><div>Главная страница</div></td></tr></table>

CSS

#tabmenu {text-align:center;}
#tabs {text-align:center; vertical-align: top}
#tabs li { list-style: none; display: inline-block}
#tabs li a {min-width:17px; min-height:25px; cursor:pointer;  display:inline-block; margin:0 20px; padding:4px 6px 0; box-shadow: 0 0 2px -1px black; border-radius:5px; border: 1px solid rgba(255,255,255,0.8);}
#tabs li a:hover{box-shadow:0 0px 5px -1px black;}
#tabs li a.active {box-shadow: 0 0px 0px 2px black; cursor: default;}

.white-color{background:white;}
.gray-color{background:#cccccc;}
.dark-color{background:#3d3e40; color: white}
.violet-color{background:#311d40}

JavaScript

$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#tabs li').click(function() {
    $('#tabs li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#tab-content div').hide();

    var indexer = $(this).index();
    $('#tab-content div:eq(' + indexer + ')').show();
});

$('#tab-content div').click(function() {
    var indexer = $(this).index() + 1;
    if ( indexer > $(this).parent().children().length-1) {indexer = 0};
    $('#tabs li a.active').removeClass("active");    
    $('#tabs li a:eq(' + indexer + ')').addClass("active");
    $('#tab-content div').hide();
    $('#tab-content div:eq(' + indexer + ')').show();
});