IT-TechCZ s.r.o. | Cloud, VoIP ústředny, vývoj webů a informačních systémů, elektronických systémů, IT poradenství
Zobrazují se odpovědi 1 až 14 z 14

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

  1. 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
    Naposledy upravil BENQ : 23.03.2019 v 19:38

  2. Co se právě děje na Webtrhu?
  3. Spatne si vykladas logiku. Aktualne prohlizena stranka se odlisuje tak, ze v menu das tagu <li> nebo <a> tridu, kterou v css odlisne nadefinujes.

  4. 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

  5. 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
    Naposledy upravil Jan Stejskal : 23.03.2019 v 22:32

  6. 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.

  7. Citace Původně odeslal Miroslav Foltýn Zobrazit příspěvek
    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í.

  8. :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?

  9. Myslím že je tam dost příkladů. Kotva je
    Kód:
    <a name="jmeno_zalozky"></a>
    a ta nemusí existovat.

  10. "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?

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

  12. 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.

  13. Citace Původně odeslal Miroslav Foltýn Zobrazit příspěvek
    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

  14. 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á.

  15. 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>

Hostujeme u Server powered by TELE3