CSS - Označení odkazu prohlížené stránky

Zdravím,
chtěl bych v menu zvlášť označit odkaz právě prohlížené podstránky. Nevíte někdo, jak v CSS případně Boostrapu nastavit?
a:active, a:focus mi nefunguje

a ani a:active::before

díky

Spatne si vykladas logiku. Aktualne prohlizena stranka se odlisuje tak, ze v menu das tagu <li> nebo <a> tridu, kterou v css odlisne nadefinujes.

Z mobilu.

Jiste, odlisit to musite nejakou tridou, potom dle toho postavit selektor.

Ciste pro zajimavost to jde i ciste v CSS bez upravy HTML, ale jenom ve Firefoxu

@document - CSS: Cascading Style Sheets | MDN

Jestliže je cílem řešení čistě v css (bez js), použijte selector :target a v url je třeba mít hash https://www.w3schools.com/cssref/sel_target.asp

Nebyl by s kotvami ten problem, ze pokud uzivatel naviguje pres odkaz na url s kotvou, tak prohlizec scrolluje k one kotve? To by bylo pro oznaceni prvku v navigaci nevhodne, vlastne by se odscrolloval vrsek stranky az k navigaci.

Původně odeslal Miroslav Foltýn ↪

Nebyl by s kotvami ten problem, ze pokud uzivatel naviguje pres odkaz na url s kotvou, tak prohlizec scrolluje k one kotve? To by bylo pro oznaceni prvku v navigaci nevhodne, vlastne by se odscrolloval vrsek stranky az k navigaci.

To se nestane, pokud ta kotva neexistuje a v tomto případě existovat nemusí.

:target - CSS: Cascading Style Sheets | MDN

:target selektor oznaci prvek jehoz id je shodne s aktualnim # url fragmentem. Kdyz ta kotva nebude existovat, tak jak potom oznacit ten odkaz tedy?

Myslím že je tam dost příkladů. Kotva je

Kód:

<a name="jmeno_zalozky"></a>

a ta nemusí existovat.

"name" atribut je v tom kontextu, kterém jste jej použil zastaralý, nevím co mi má říct. Validní je pouze na vybraných tazích (tag) - https://developer.mozilla.org/en-US/...TML/Attributes

Moje pointa v komentáři byla taková, že pokud chcete použít :target pro modifikaci stylů nějakého odkazu v navigaci (která nejspíše bude na všech stránkách), tak musíte odkazy, případně něco nad nimi, označit pomocí ID, aby to :target vůbec zachytil. To by potom vždy odscrollovalo stránku k hornímu levému okraji onoho elementu.

Možná mluvíme oba o něčem jiném, nebo něčemu nerozumím?

musil.david popsal nejbezneji pouzivanou metodu dneska. Proc mu radite kotvy? Jste vubec koderi nebo sumari?

Já jsem také potvrdil třídy, jak jinak. Viz hned první můj komentář.

Jenom ze zajímavosti jsem dodal @document. Snažil jsem se porozumět tomu :target.

Původně odeslal Miroslav Foltýn ↪

Já jsem také potvrdil třídy, jak jinak. Viz hned první můj komentář.

Jenom ze zajímavosti jsem dodal @document. Snažil jsem se porozumět tomu :target.

Jj sorry, prehledl jsem ten prispevek nahore pdo davidovo

Máte pravdu, nepočítal jsem s tím, že ten tag umístíte jinam než na začátek stránky. Pak je třeba zajistit, aby element začínal nahoře, i když se zobrazí jinde, níže. Použije se transparentní border-top a negativní margin-top. Ale jak jsem psal v prvním komentáři, má to smysl pouze pokud je požadavek na čistě css řešení. U webu to smysl nedává.

Nehldáte něco takového ?

Edit fiddle - JSFiddle

---------- Příspěvek doplněn 24.03.2019 v 16:22 ----------

Kód:

<script type="text/javascript">
	$(function(){
		$('.nav a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
		$('.nav a').click(function(){
			$(this).parent().addClass('active').siblings().removeClass('active')	
		})
	})
	</script>