Форум

blackcky · #1 (**permalink**) 24.10.2014, 12:49

Здравствуйте господа, моя проблема состоит в скудном знании js, перелопатив множество сайтов с литературой я так и не пришел к ожидаемому результату, поэтому обращаюсь к вам.

Ситуация такова: у меня есть один большой новостной div в нем 5 пунктов( грубо говоря это: all,1,2,3,4.). В каждом из этих пунктов имеются 10 маленьких div новостей. По умолчанию на главной странице отображается пункт all(в который входят пункты от 1 до 4(грубо говоря все)). Нужно сделать так что при нажатии на пункт 1 отображались только те новостные div у которых class="1" , при нажатии на пункт 2 только div c class="2" и так далее.
В html я классы задал, поэтому проблема заключается только в js( а то есть в том, как это все оформить в js).

Спасибо за внимание, надеюсь на вашу помощь.

<div>
<div id="top">
<ul>
<li><a href="#">ALL</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li> <li><a href="#">3</a></li><li><a href="#">4</a></li>
</ul> 
</div>
<div class="novost-1">
<div class="novost"></div>
</div>
<div class="novost-2">
<div class="novost"></div>
</div>
<div class="novost-3">
<div class="novost"></div>
</div>
<div class="novost-4">
<div class="novost"></div>
</div>
<div class="novost-1">
<div class="novost"></div>
</div>
<div class="novost-2">
<div class="novost"></div>
</div>
<div class="novost-3">
<div class="novost"></div>
</div>
<div class="novost-4">
<div class="novost"></div>
</div>
</div>

рони · #2 (**permalink**) 24.10.2014, 13:05

blackcky,
на форуме уйма этих открывашек ... в том числе и того харакера что вы просите ... поискали бы ... или хоть макет html сделали

рони · #3 (**permalink**) 24.10.2014, 14:36

blackcky,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #4 (**permalink**) 24.10.2014, 14:37

blackcky,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var a = $("#top a"), All = $(".novost-1, .novost-2, .novost-3, .novost-4");
	   a.click(function(event) {
	     event.preventDefault();
	     var text = this.text ;
	     All.hide();
         text == 'ALL'  ?  All.show() : $(".novost-"+text).show();
      });
});
  </script>
</head>

<body>
<div>
 <div id="top">
 <ul>
 <li><a href="#">ALL</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li> <li><a href="#">3</a></li><li><a href="#">4</a></li>
 </ul>
 </div>
 <div class="novost-1">
 <div class="novost">1</div>
 </div>
 <div class="novost-2">
 <div class="novost">2</div>
 </div>
 <div class="novost-3">
 <div class="novost">3</div>
 </div>
 <div class="novost-4">
 <div class="novost">4</div>
 </div>
 <div class="novost-1">
 <div class="novost">1</div>
 </div>
 <div class="novost-2">
 <div class="novost">2</div>
 </div>
 <div class="novost-3">
 <div class="novost">3</div>
 </div>
 <div class="novost-4">
 <div class="novost">4</div>
 </div>
 </div>
</body>

</html>

blackcky · #5 (**permalink**) 24.10.2014, 16:41

Спасибо за информацию и за код, вы мне очень помогли. НО есть одна проблема, код отказывается работать корректно, если в имени пункта есть пробел.

рони · #6 (**permalink**) 24.10.2014, 16:41

blackcky,

пишите в пунктах что хотите

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var a = $("#top a"), All = $(".novost-1, .novost-2, .novost-3, .novost-4");
	   a.click(function(event) {
	     event.preventDefault();
	     var cls = $(this).data('cls') ;
	     All.hide();
         $(cls).show();
      });
});
  </script>
</head>

<body>
<div>
 <div id="top">
 <ul>
 <li><a href="#" data-cls=".novost-1, .novost-2, .novost-3, .novost-4">ALL</a></li>
 <li><a href="#" data-cls=".novost-1">1</a></li>
 <li><a href="#" data-cls=".novost-2">2</a></li>
 <li><a href="#" data-cls=".novost-3">3</a></li>
 <li><a href="#" data-cls=".novost-4">4</a></li>
 </ul>
 </div>
 <div class="novost-1">
 <div class="novost">1</div>
 </div>
 <div class="novost-2">
 <div class="novost">2</div>
 </div>
 <div class="novost-3">
 <div class="novost">3</div>
 </div>
 <div class="novost-4">
 <div class="novost">4</div>
 </div>
 <div class="novost-1">
 <div class="novost">1</div>
 </div>
 <div class="novost-2">
 <div class="novost">2</div>
 </div>
 <div class="novost-3">
 <div class="novost">3</div>
 </div>
 <div class="novost-4">
 <div class="novost">4</div>
 </div>
 </div>
</body>

</html>

blackcky · #7 (**permalink**) 24.10.2014, 17:17

Спасибо большое, все работает. Просьба конечно не по теме, но не могли бы вы назвать литературу по js(желательно на русском) для освоения этого языка программирования. HTML и css мне стали понятны в процессе, но js не так прост.

рони · #8 (**permalink**) 24.10.2014, 17:20

blackcky,
http://learn.javascript.ru/

Форум

Справочник

Discord чат

Курсы javascript