как сохранить отображение нижней границы для элемента ссылки, когда пользователь активен на странице - PullRequest
Новая
       10

как сохранить отображение нижней границы для элемента ссылки, когда пользователь активен на странице

0 голосов
/ 06 мая 2020

Когда я нажимаю на одну ссылку на панели навигации, я хочу, чтобы нижняя граница моей границы продолжала отображаться. Есть два варианта поведения: - При наведении: отображение нижней границы. - Когда ссылка активна, отображается нижняя граница (пользователь активен на странице).

Я не знаю, как это сделать, может кто-нибудь мне помочь? спасибо!

  • Файл s css - 

	a {
				span {
					padding-bottom: 5px;
				}
			}
			a:nth-child(1) :hover {
				border-bottom: 3px solid "blue";
			}
			a:nth-child(2) :hover {
				border-bottom: 3px solid #8e1cfb;
			}
  • tsx-файл на панели навигации компонента React - 

						<div>
							<Link to={`${process.env.REACT_STATIC_PUBLIC_PATH}`}>
								<span>Link 1</span>
							</Link>
							{''}
							<Link to={`${process.env.REACT_STATIC_PUBLIC_PATH}`}>
								<span>Link 2</span>
							</Link>
						</div>

Ответы [ 2 ]

1 голос
/ 06 мая 2020

[Изменить] : Мое решение ниже работает нормально, но не использует класс «активный» по умолчанию, добавленный самим маршрутизатором реакции при нажатии на ссылку. Я играл с ним на This Stackblitz для реактивного маршрутизатора (вам нужно будет обновить пакет и изменить Link на NavLink, если вы используете маршрутизатор v5), но не смог заставить активный класс работать должным образом , класс active не был удален из первой ссылки, не знаю почему (но вы можете проверить код, и вы увидите, что добавлен к другим вашим ссылкам ).

Теперь, если хотите, есть также activeStyle, который вы можете использовать (не рекомендуется, блех).

Все ваши ссылки являются первыми дочерними элементами div, поэтому вы можете: 

const App = () => {
  const setActiveLink = e => {
    // easier for me, you can change with getElementById or getElementByClassName
    const links = document.getElementsByTagName("a"); 

    Array.from(links).forEach(el => el.classList.remove("active"));
    e.target.classList.add("active");
  };

  return (
    <div className="navbar">
      <a href="#" onClick={setActiveLink}>
        link 1
      </a>
      <a href="#" onClick={setActiveLink}>
        link 2
      </a>
      <a href="#" onClick={setActiveLink}>
        link 3
      </a>
    </div>
  );
};

Adn в вашем css просто добавьте: 

div > a {

  text-decoration: none;
  padding: 5px;
}

div > a:hover{
  border-bottom: 1px solid red;
}

.active {
  border-bottom: 1px solid red;
}

Конечно, вы должны адаптировать теги css, которые я выбрал, в соответствии с вашим кодом. Вот пример stackblitz: Пример на Stackblitz

1 голос
/ 06 мая 2020

Просто обработайте класс active в своем css. Например, .active { color: white; border-bottom: 3px solid #2196f3; }

Поскольку вы используете реактивный маршрутизатор Link, вы получите класс active, добавленный по умолчанию, когда маршрут активен.

...