Как привязать к элементу списка свой div?

Question

[Валентин Мельник]

Есть следующий список на ul>li и блоки

<div id="dropdown-menu" class="dropdown-menu">
	<span class="title-list">Item1</span>
	<ul>
		<li><a href="#">Item1</a></li>
		<li><a href="#">Item2</a></li>
		<li><a href="#">Item3</a></li>
		<li><a href="#">Item4</a></li>
		<li><a href="#">Item5</a></li>
	</ul>
</div>
<div class="div1">Text1</div>
<div class="div2">Text2</div>
<div class="div3">Text3</div>
<div class="div4">Text4</div>
<div class="div5">Text5</div>

.dropdown-menu ul 
	margin: 0
	padding: 0 20px 0 20px
	width: 100%
	list-style: none
	display: none
.dropdown-menu ul li
	height: 75px

.dropdown-menu ul li:hover
	background: #fff
	a
		border-bottom: 2px solid $text-hover
		color: $text-hover

.dropdown-menu ul li a 
	width: 100%
	padding: 5px 0px
	text-decoration: none
	font-size: 24px
	color: $text
	font-weight: 700
	font-family: "Comfortaa", sans-serif

.dropdown-menu .title-list 
	display: inline-block
	width: 100%
	height: 75px
	padding: 0px 0  0px 20px
	font-size: 24px
	line-height: 75px
	font-family: "Comfortaa", sans-serif
	font-weight: 700
	cursor: pointer
	border: 1px solid #818181
	box-sizing: border-box
	border-radius: 5px
	margin-bottom: 20px
	color: $text-hover
.dropdown-menu .title-list::after 
	content: ""
	float: right
	display: block
	background: url("../img/arrow-down.svg") no-repeat 10px center
	width: 30px
	height: 30px
	margin-right: 10px
	margin-top: 15px

.dropdown-menu.open .title-list 
	color: $text-hover
.dropdown-menu.open .title-list::after 
	background: url("../img/arrow-up.svg") no-repeat 10px center
.dropdown-menu.open ul 
	display: block

window.onload=function(){
var menuElem = document.getElementById('dropdown-menu'),
    titleElem = menuElem.querySelector('.title-list');
    document.onclick = function(event) {
    var target = elem = event.target;
    while (target != this) {
          if (target == menuElem) {
          if(elem.tagName == 'A') {
            titleElem.innerHTML = elem.textContent;
          }
          menuElem.classList.toggle('open')
              return;
          }
          target = target.parentNode;
      }
    menuElem.classList.remove('open');
}
}

Как сделать чтобы при выборе первого пункта списка видимым был первый блок и т.д
Список на ul>li чтобы можно было стилизовать

Comments

[origami1024]

Угадываю, что тебе нужно, поправляй:
1. Сделать все divы из нижнего списка невидимыми изначально.
2. Нажимая на каждую ссылку в первом списке, показывался соответствующий ей по номеру див (и только он один).

[Валентин Мельник]

origami1024, Все верно

[Finch_85]

Валентин Мельник, Если правильно понял Вас
https://codepen.io/MisterFOX/pen/gEwWWP?editors=1111
говнокод конечно, но зато коротко и быстро

Answer 1

[origami1024]

1. HTML - прикрепить все дивы к контейнеру

<div class="wrapper">
<div class="div1">Text1</div>
<div class="div2">Text2</div>
<div class="div3">Text3</div>
<div class="div4">Text4</div>
<div class="div5">Text5</div>
</div>

2. CSS

.wrapper div{
	display: none;
}

3. JS, изменения только в блоке if(elem.tagName == 'A') {...} :

window.onload=function(){
var menuElem = document.getElementById('dropdown-menu'),
    titleElem = menuElem.querySelector('.title-list');
    document.onclick = function(event) {
    var target = elem = event.target;
    while (target != this) {
          if (target == menuElem) {
          if(elem.tagName == 'A') {
            var name = '.div' + elem.textContent.substr(-1);
            [].forEach.call(document.querySelector(".wrapper").children, function(child) {child.style.display = "none"});

            document.querySelector(".wrapper").querySelector(name).style.display = "block";
          }
          menuElem.classList.toggle('open')
              return;
          }
          target = target.parentNode;
      }
    menuElem.classList.remove('open');
}
}

Теоретические моменты:
1. Св-во display: none для скрытия/показа div'ов
2. Читаем последнюю букву в тексте ссылки - цифра, соотв номеру дива.
3. По этой цифре склеиваем имя класса дива.
4. Изменяем св-во display у элемента с этим именем класса