Вопрос:

Только один элемент списка идет первым при загрузке страницы

javascript jquery html css

63 просмотра

1 ответ

38 Репутация автора

Как сделать, чтобы этот один элемент li был первым, так как пользователь на следующей странице нажимает (www.url.com/demo/#collapse1) - должен быть первым или (www.url.com/demo/#collapse5) - Быть первым? и другие элементы останутся на своих местах, когда вы находитесь на той же странице. www.url.com/demo

$('li').click(function() {
  $(this).prependTo($(this).parent());
});
body {
  font-family: verdana;
  font-size: 12px;
}

a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 100%;
  padding: 8px 0;
  text-indent: 10px;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
}

ul li {
  background: #eee;
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#one">01</a></li>
  <li><a href="#two">02</a></li>
  <li><a href="#three">03</a></li>
  <li><a href="#four">04</a></li>
  <li><a href="#">05</a></li>
</ul>

Автор: Mantas Источник Размещён: 11.04.2017 09:38

Ответы (1)


3 плюса

11521 Репутация автора

Решение

Я уверен, что вы ищете способ поменять местами первый элемент и элемент, на который нажали. Вот способ сделать это с помощью .detach. Сначала мы берем, .siblingsа затем мы берем первый элемент из списка через .eq. Оттуда мы отсоединяем его (или удаляем из HTML, но сохраняем его как переменную). Затем мы firstдобавляем элемент, к которому щелкнули, родительский элемент, отсоединяя его тоже только после того, как присвоение было добавлено после нашего текущего элемента. два элемента.

$('li').click(function() {
  first = $(this).siblings().eq(0).detach()
  $(this).parent().prepend($(this).after(first).detach());
});

if (window.location.hash != "") {
	$('li').eq(Number(window.location.hash.slice(1))-1).click();
}
body {
  font-family: verdana;
  font-size: 12px;
}

a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 100%;
  padding: 8px 0;
  text-indent: 10px;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
}

ul li {
  background: #eee;
  margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#1">01</a></li>
  <li><a href="#2">02</a></li>
  <li><a href="#3">03</a></li>
  <li><a href="#4">04</a></li>
  <li><a href="#5">05</a></li>
</ul>

Автор: Neil Размещён: 11.04.2017 09:48
Вопросы из категории :
32x32