Alexey87
Advanced Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
<!DOCTYPE html>
<html lang="ru">
<head>
<style type="text/css">
.tabs {
display: block;
position: relative;
list-style: none;
text-align: center;
}
.tabs .tab>input[type="radio"] {
visibility: hidden;
z-index: 10;
position: absolute;
}
.tabs .tab>input[type="radio"]:checked + .content {
opacity: 1;
}
.tabs .tab>label {
display: block;
cursor: pointer;
position: relative;
color: #FFF;
}
.tabs .content {
z-index: 0;
overflow: hidden;
position: absolute;
opacity: 0;
}
.ban {
text-align: center;
display: inline-block;
padding-right: 4px;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab">
<label for="tab1"></label>
<input type="radio" name="tabs" checked id="tab1">
<div id="tab-content1" class="content" align="center">
<div class="ban"><a href="http://google.com/" target="_blank">Google</a></div>
<div class="ban"><a href="https://www.bing.com/" target="_blank">Bing</a></div>
<div class="ban"><a href="https://www.yahoo.com/" target="_blank">Yahoo!</a></div>
</div>
<li class="tab">
<label for="tab2"></label>
<input type="radio" name="tabs" id="tab2">
<div id="tab-content2" class="content">
<div class="ban"><a href="http://yandex.ru/">Яндекс.Поиск</a></div>
<div class="ban"><a href="http://go.mail.ru/" target="_blank">Поиск@Mail.Ru</a></div>
<div class="ban"><a href="http://www.sputnik.ru/" target="_blank">Спутник</a></div>
</div>
</ul>
<script type="text/javascript">
setInterval(function() {
var radios = document.querySelectorAll('input[name="tabs"]'),
ind = 0;
radios.forEach(function(el, i) {
if (el.checked) ind = i + 1;
});
if (ind == radios.length) ind = 0;
radios[ind].click();
}, 20000);
if ( !Array.prototype.forEach ) {
Array.prototype.forEach = function(fn, scope) {
for(var i = 0, len = this.length; i < len; ++i) {
fn.call(scope, this[i], i, this);
}
}
}
</script>
</body>
</html>
|
Всего записей: 657 | Зарегистр. 27-01-2008 | Отправлено: 22:57 09-03-2020 | Исправлено: Alexey87, 23:16 21-03-2020 |
|
