Форум

Ursen · #1 (**permalink**) 11.02.2015, 12:56

Добрый день,к сожалению в javascript я не силён, а мне нужно реализовать следующие
на странице есть <div id="1"><div id="2">....<div id="N">
и все они имеют стиль display:none; как можно сделать что бы при нажати на кнопку они показывались (display:block), первое нажатие первый див, второе нажатие 2 див и.д.
Может кто ни будь подкинет хотя бы ссылочку на пример подкинет,буду очень благодарен

рони · #2 (**permalink**) 11.02.2015, 13:21

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>

Ursen · #3 (**permalink**) 11.02.2015, 13:27

ОГРОМНЕЙШИЕ ВАМ СПАСИБО!!!!!!

ksa · #4 (**permalink**) 11.02.2015, 13:30

рони опередил...

<!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>

Форум

Справочник

Discord чат

Курсы javascript