Javascript-форум - Выделение выбранного пункта

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

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

- - Выделение выбранного пункта (https://javascript.ru/forum/misc/73878-vydelenie-vybrannogo-punkta.html)

Выделение выбранного пункта

Доброго времени суток!
Реализовано отображение пунктов при нажатии на которые изменяется контент страницы. Т.е. при нажатии на "Пункт 1" содержание страницы одно, при нажатии на "Пункт 2" содержание на этой же странице другое.

<div class="installation">
			<div class="installation_element">
			
				<a href="#" onclick="openbox('box1'); return false" class="link">Пункт 1</a>
			</div>
			<div class="installation_element">
				<a href="#" onclick="openbox('box2'); return false" class="link">Пункт 2</a>
			</div>
			<div class="installation_element">
				<a href="#" onclick="openbox('box3'); return false" class="link">Пункт 3</a>
			</div>
		</div>

function openbox(id) {
  var all = document.querySelectorAll(".block-of-text");
  for (var i = 0; i < all.length; i++) {
    if (all[i].id == id) {
      all[i].style.display = (all[i].style.display == 'none')? 'block' : 'active';
      
    } else {
      all[i].style.display = 'none';
    }
  }
}

При нажатии на пункт устанавливается стиль display: block;.
Подскажите, каким образом сделать так, чтобы у выделенного пункта отображалось подчеркивание внизу (скрин "Смена контента")? Спасибо.

var elt = document.querySelectorAll(".installation_element");
elt.forEach((el, i)=> el.onclick = e =>elt.forEach((el, n)=>el.style.borderBottom = n==i?'1px solid gray':'0px'));

j0hnik, спасибо что откликнулись.
Данный вариант решает поставленную задачу. Спасибо Вам огромное:thanks:
Подскажите, возможно сделать так, чтобы изначально отображаемый пункт (в данном случае "Пункт 1") был подчеркнут?
Т.е. по умолчанию при открытии страницы отображается контент "Пункт 1", но пункт не подчеркнут, а подчеркивается если на него кликнуть.

_marisha,
форум - поиск - открывашка

var elt = document.querySelectorAll(".installation_element");
elt.forEach((el, i)=> el.onclick = e =>elt.forEach((el, n)=> n==i?el.classList.add('borderB'):el.classList.remove('borderB')));

тогда лучше так, дать первому блоку класс borderB и задать ему стиль, при клике он будет применяться к нужному эл-ту

j0hnik, то что нужно, супер! ;) Спасибо Вам огромное :thanks:
Итог:

<div class="installation">
			<div class="installation_element borderB">
				<a href="#" onclick="openbox('box1'); return false" class="link">Пункт 1</a>
			</div>
			<div class="installation_element">
				<a href="#" onclick="openbox('box2'); return false" class="link">Пункт 2</a>
			</div>
			<div class="installation_element">
				<a href="#" onclick="openbox('box3'); return false" class="link">Пункт 3</a>
			</div>
		</div>

.borderB
{
	border-bottom: 1px solid gray;
	font-weight: bold;
}

function openbox(id) {
  var all = document.querySelectorAll(".block-of-text");
  for (var i = 0; i < all.length; i++) {
    if (all[i].id == id) {
      all[i].style.display = (all[i].style.display == 'none')? 'block' : 'active'; 
    } else {
      all[i].style.display = 'none';
    }
  }
  var elt = document.querySelectorAll(".installation_element");
  elt.forEach((el, i)=> el.onclick = e =>elt.forEach((el, n)=> n==i?el.classList.add('borderB'):el.classList.remove('borderB')));
}