Вкладки (страницы) на одной странице
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/bahek2462774/jquery.EmbedVkGallery/master/js/jquery.slimbox2.js"></script>
<script src="https://cdn.rawgit.com/bahek2462774/jquery.EmbedVkGallery/master/js/jquery.embedvkgallery.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/bahek2462774/jquery.EmbedVkGallery/master/slimbox/slimbox2.css">
<div class="pagination">
<div><a class="active" href="javascript:SwitchTab('tb_1', 'content_1');" id="tb_1" class="active">1</a></div>
<div><a href="javascript:SwitchTab('tb_2', 'content_2');" id="tb_2">2</a></div>
<div><a href="javascript:SwitchTab('tb_3', 'content_3');" id="tb_3">3</a></div>
</div><div style='clear: both;'></div>
<div id="content_1">
<!-- паказываем альбом (загружается всегда первый) -->
<div data-link="http://vk.com/album-137090999_242074991" id="vk1" style="width: 570px;" data-width="141" class="p embedvkgallery"></div>
</div>
<div id="content_2" style="display:none;">
<!-- прячем первый альбом и показываем второй -->
<div data-link="http://vk.com/album-137090999_242065048" id="vk2" style="width: 570px;" data-width="142" class="p embedvkgallery"></div>
</div>
<div id="content_3" style="display:none;">
<!-- прячем первый альбом и показываем второй -->
<div data-link="http://vk.com/album-137090999_241274051" id="vk3" style="width: 570px;" data-width="142" class="p embedvkgallery"></div>
</div>
<script>
function SwitchTab(my_tab, my_content) {
var div_content = document.getElementById(my_content);
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
div_content.style.display = 'block';
document.getElementById('tb_1').className = '';
document.getElementById('tb_2').className = '';
document.getElementById('tb_3').className = '';
...
CSS
.pagination div {
text-align: center;
float: left;
margin: 0 20px 0 0; /* отступ справа */
margin-bottom: 15px; /* Отступ снизу */
}
.pagination div a {
padding-top: 2px; /* сдвигаем сверху, чтобы background выглядел правильно */
width: 25px;
height: 25px;
display: block;
}
.pagination .prev a, .pagination .next a {
/* убираем влияние width:25px из правила .pagination div a */
width: auto;
}
.pagination div a:hover, .pagination div a.active {
color: white;
/* задний фон для текущий страницы и для наведения */
background: url('http://projects.alexdev.ru/pagination_8_9_13/i/select.png') 0 0 no-repeat;
}
.pagination .prev a:hover, .pagination .next a:hover {
width: auto; /* автоматическая ширина */
color: #1982d1;
background: none; /* убираем задний фон при наведении */
}