Javascript-форум - Переключение между тематическими блоками

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Переключение между тематическими блоками (https://javascript.ru/forum/misc/51113-pereklyuchenie-mezhdu-tematicheskimi-blokami.html)

Переключение между тематическими блоками

Здравствуйте господа, моя проблема состоит в скудном знании 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>

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

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

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

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

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

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,
:cray: пишите в пунктах что хотите

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

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