последовательный показ объектов
Добрый день,к сожалению в javascript я не силён, а мне нужно реализовать следующие
на странице есть <div id="1"><div id="2">....<div id="N"> и все они имеют стиль display:none; как можно сделать что бы при нажати на кнопку они показывались (display:block), первое нажатие первый див, второе нажатие 2 див и.д. Может кто ни будь подкинет хотя бы ссылочку на пример подкинет,буду очень благодарен |
Ursen,
очередная открывашка ... пример можно переписать без jquery
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide {
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var divs = $(".hide"), len = divs.length, button = $("#next"), n = len-1;
button.click(function() {
$(divs[n]).addClass("hide");
n = ++n % len;
$(divs[n]).removeClass("hide");
});
});
</script>
</head>
<body>
<input id="next" name="" type="button" value="next">
<div class="hide">1</div>
<div class="hide">2</div>
<div class="hide">3</div>
<div class="hide">4</div>
<div class="hide">5</div>
<div class="hide">6</div>
<div class="hide">7</div>
<div class="hide">8</div>
<div class="hide">9</div>
<div class="hide">10</div>
</body>
</html>
|
ОГРОМНЕЙШИЕ ВАМ СПАСИБО!!!!!!
|
рони опередил... :D
<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
div {
display: none;
}
</style>
<script type='text/javascript'>
$(function(){
(function(){
var item=0;
$('button').click(function(){
$('#'+item).hide();
item=($('#'+(++item)).length==0)? 1: item;
$('#'+item).show();
});
})();
});
</script>
</head>
<body>
<div id="1">1</div><div id="2">2</div><div id="3">3</div>
<button>Go!</button>
</body>
</html>
|
| Часовой пояс GMT +3, время: 11:08. |