Javascript-форум - Скрытие-показ кнопок в меню

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

- jQuery (https://javascript.ru/forum/jquery/)

- - Скрытие-показ кнопок в меню (https://javascript.ru/forum/jquery/35507-skrytie-pokaz-knopok-v-menyu.html)

Скрытие-показ кнопок в меню

День добрый. Не могу найти решение вопроса, а из-за хронического недосыпа разумные варианты не приходят в голову.

Есть меню подобной структуры:

<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

Нужно сделать так, чтоб в меню отображались только две кнопки.
Если мы находимся на вкладке "1", то видим кнопки "2" и "3".
Если на вкладке "2", то "1" и "3".
И если на вкладке "3", то "1" и "2".

Помогите, пожалуйста, с решением или направьте в правильное русло.

Примерно так должно работать:

<ul>
      <li><a href="#" id="h1" style="display: none;">1</a></li>
      <li><a href="#" id="h2">2</a></li>
      <li><a href="#" id="h3">3</a></li>
      <li><a href="#" id="h4">4</a></li>
      <li><a href="#" id="h5">5</a></li>
    </ul>
        
    <script>
      document.getElementById('h1').onclick = function() {
        document.getElementById('h1').style.display = 'none';
        document.getElementById('h2').style.display = '';
        document.getElementById('h3').style.display = '';
        document.getElementById('h4').style.display = '';
        document.getElementById('h5').style.display = ''
      }
      document.getElementById('h2').onclick = function() {
        document.getElementById('h1').style.display = '';
        document.getElementById('h2').style.display = 'none';
        document.getElementById('h3').style.display = '';
        document.getElementById('h4').style.display = '';
        document.getElementById('h5').style.display = ''
      }
      document.getElementById('h3').onclick = function() {
        document.getElementById('h1').style.display = '';
        document.getElementById('h2').style.display = '';
        document.getElementById('h3').style.display = 'none';
        document.getElementById('h4').style.display = '';
        document.getElementById('h5').style.display = ''
      }
      document.getElementById('h4').onclick = function() {
        document.getElementById('h1').style.display = '';
        document.getElementById('h2').style.display = '';
        document.getElementById('h3').style.display = '';
        document.getElementById('h4').style.display = 'none';
        document.getElementById('h5').style.display = ''
      }
      document.getElementById('h5').onclick = function() {
        document.getElementById('h1').style.display = '';
        document.getElementById('h2').style.display = '';
        document.getElementById('h3').style.display = '';
        document.getElementById('h4').style.display = '';
        document.getElementById('h5').style.display = 'none'
      }
    </script>

Можно ли как-то сократить скрипт?

добавляете 1-му пункту класс Актив.

При клике на li проверяйте наличие следующего li и если он есть - показывайте его (смотрите есть ли у него класс актив, если да - то надо скрыть следующий за активом элемент (опять же при условии его наличия), если его нет - то скрыть первый элемент). Если следующего li нет - показываем первый.

С предудущими элементами почти то-же самое. Код простой, но нудный. Не будет получаться - пишите.

Читайте про .next() .prev() jQuery

Проверить наличие следующего элемента: $(this).next().length

Цитата:

Сообщение от Densofting

Можно ли как-то сократить скрипт?

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.off {
	display: none;
}
</style>
<script type="text/javascript">
function off(Id) {
	var o=document.getElementById(Id);
	var oa=document.getElementById('menu');
	oa=oa.getElementsByTagName('a');
	var i;
	for (i=0; i<oa.length; i++) {
		oa[i].className=(oa[i]==o)? 'off': '';
	};
};
</script>
</head>
<body>
<ul id='menu'>
	<li><a href="#" id="h1" class='off'>1</a></li>
	<li><a href="#" id="h2">2</a></li>
	<li><a href="#" id="h3">3</a></li>
	<li><a href="#" id="h4">4</a></li>
	<li><a href="#" id="h5">5</a></li>
</ul>
<script type="text/javascript">
var o=document.getElementById('menu'),
	i;
o=o.getElementsByTagName('li');
for (i=0; i<o.length; i++) {
	o[i].onclick=(function (Id) {
		return function () {
			off(Id);
		}
	})('h'+(i+1));
};
</script>
</body>
</html>

Цитата:

Сообщение от tsigel

Код простой, но нудный

Твой вариант действительно нудный... :D

Сам пришел к другому, более короткому, но менее универсальному и неудобному варианту.

Буду вникать, спасибо за ответы!

ksa,
Я описывал несколько другой функционал. В моем варианте отображаются 2 соседа от активного элемента (предыдущий и следующий) как написано тут:

Цитата:

Сообщение от Densofting

Вы же просто скрываете активный элемент, что можно сделать так:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<style type="text/css">
.off {
	display: none;
}
</style>
<script type="text/javascript">
function off(Id) {
	var o=document.getElementById(Id);
	var oa=document.getElementById('menu');
	oa=oa.getElementsByTagName('a');
	var i;
	for (i=0; i<oa.length; i++) {
		oa[i].className=(oa[i]==o)? 'off': '';
	};
};
</script>
</head>
<body>
<ul id='menu'>
	<li><a href="#" id="h1" class='off'>1</a></li>
	<li><a href="#" id="h2">2</a></li>
	<li><a href="#" id="h3">3</a></li>
	<li><a href="#" id="h4">4</a></li>
	<li><a href="#" id="h5">5</a></li>
</ul>
<script type="text/javascript">
$('ul').find('li').first().find('a').addClass('active');

$('li').click(function () {
  $('.active').show().removeClass('active');
  $(this).find('a').addClass('active').hide();
})
</script>
</body>
</html>

Цитата:

Сообщение от tsigel

Я описывал несколько другой функционал.

Именно про него я и написал, что он нудный. :D

Цитата:

Сообщение от tsigel

что можно сделать так

Если использовать JQ - можно сделать и лучше. :)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.off {
	display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('#menu a').click(function (){
		$('#menu a').removeClass('off');
		$(this).addClass('off');
	});
});
</script>
</head>
<body>
<ul id='menu'>
	<li><a href="#" id="h1" class='off'>1</a></li>
	<li><a href="#" id="h2">2</a></li>
	<li><a href="#" id="h3">3</a></li>
	<li><a href="#" id="h4">4</a></li>
	<li><a href="#" id="h5">5</a></li>
</ul>
</body>
</html>