Форум

murad30 · #1 (**permalink**) 06.10.2011, 15:09

Всем привет.
ЕСТЬ МЕНЮ. Необходимо сделать так чтобы при нажатии на ссылку все остальные сдвигались в сторону. а при нажатии следующего все возвращались на исходную позицию и кроме выбранного все сдвигались в сторону.

Код:

 <div id="main">
      <ul id="menu">
             <li id="1"> <a href="#">Ссылка1</a> </li>
             <li id="2"> <a href="#">Cсылка2</a> </li>
             <li id="3">  <a href="#">Ссылка3</a>  </li>
             <li id="4">  <a href="#">Ссылка4</a> </li>
             <li id="5"> <a href="#">Ссылка5</a> </li>
   </ul>
</div>

вот не знаю как реализовать так чтобы сверить текущую позицию(ту которую нажали) со всеми,
и если не равно то сдвинуть.
Я правильно начал делать. А как мне определить текущую.

var div = document.getElementById('main')
    var elems = div.getElementsByTagName('*')
		for(var i=0; i<elems.length; i++)

Заранее спасибо.

ksa · #2 (**permalink**) 06.10.2011, 15:30

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

Необходимо сделать так чтобы при нажатии на ссылку все остальные сдвигались в сторону.

Это типа ТЗ?

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

Я правильно начал делать.

Нет...

murad30 · #3 (**permalink**) 06.10.2011, 15:59

Почему, а как сделать.
Как сохранить нажатую позицию
Как пройтись по всем элементам

Я понимаю вам смешно ,что я не знаю такие мелочи, сам я недавно начал изучать js. а я вот какой день мучаюсь. и ни фига ничего не хочет получаться.

А так вот само задание

Требуется создать список <ul>ссылок <a> со след.функциональностью:
1. При клике на ссылку все остальные сдвигаются в сторону.
2. При клике на другую ссылку сначала все возвращаются на исходную позицию, а затем сдвигаются относительно текущей, как в п. 1.
3. После клика на ссылке в ее текст добавляется в конец счетчик кликов (например, «Ссылка [2]»), а при каждом клике значение счетчика увеличивается. До первого клика ссылка счетчика не имеет («Ссылка»).
4. После достижения порогового значения счетчика кликов (5) ссылка исчезает из списка.

ksa · #4 (**permalink**) 06.10.2011, 16:07

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

сам я недавно начал изучать js

Вот и прекраное задание для изучения...

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

Как сохранить нажатую позицию
Как пройтись по всем элементам

Все ответы есть в учебниках по JS... Или ты как-то особенно собрался его изучать?

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

А так вот само задание

Кто его писал интересно?

Что есть "сдвигаются в сторону"?

Сколько заплатишь за реализацию того "задания"?

smallredstone · #5 (**permalink**) 06.10.2011, 16:31

$(document).ready(function () {
  var maxclicked = 4; // на четвертом клике ссылка исчезает
  $('#menu li').append('<span></span>').data('clicked',0); //добавляем счетчик в текстовом виде и в виде переменной
  
  $('#menu li').click(function () {
    $(this).data('clicked', $(this).data('clicked') + 1);
    if ($(this).data('clicked') == maxclicked) {
      $(this).remove();
      return;
    }
    
    $(this).children('span:last').html('[' + $(this).data('clicked') + ']');
    
    $(this).removeClass('left');
    $(this).parent().children().not(this).addClass('left');
  });
});

left будет классом для сдвига элементов списка влево
left { margin-left: 5em }

nikita.mmf · #6 (**permalink**) 07.10.2011, 14:51

Если я правильно понял задачу то вам надо что-то вроде этого

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		li {
			padding: 0.5em 0;
		}
		li.active~li {
			padding-left: 1em;
		}
	</style>
</head>
<body>
	<ul id="main">
		<li><a href="#">Lorem ipsum dolor</a></li>
		<li><a href="#">Lorem ipsum dolor</a></li>
		<li><a href="#">Lorem ipsum dolor</a></li>
		<li><a href="#">Lorem ipsum dolor</a></li>
		<li><a href="#">Lorem ipsum dolor</a></li>
		<li><a href="#">Lorem ipsum dolor</a></li>
		<li><a href="#">Lorem ipsum dolor</a></li>
	</ul>
	<script>
		var currentListItem;
		document.getElementById('main').addEventListener('click', function(e){
			if ( e.target.nodeName.toLowerCase() != "a" ) return;
			e.preventDefault();
			var listItem = e.target.parentNode;
			if ( currentListItem ) currentListItem.className = (" " + currentListItem.className + " ").replace(" active ", " ").trim();
			if ( currentListItem  === listItem ) return;
			listItem.className = (listItem.className  + " active").trim();
			currentListItem = listItem;
		}, false);
	</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript