html - CSS/HTML5 using :target or :active to display different text when link is clicked -
sorry may open ended question... wondering if @ possible display different text when link clicked. example on personal website if have "about" or "contact" link switch text of body without reloading page.
in body of index.html file have:
<div class="nav-bar"> <ul class="nav"> <li id="other"><a>about</a></li> <li id="other"><a>contact</a></li> <li id="other"><a>other</a></li> </ul> </div> and in wondering if using a:active or a:target in separate css style sheet perform task described above or if need use js.
the idea of switching text of body without reloading page commonly known “single page application”, rather trendy thing many benefits , disadvantages or challenges. implemented using javascript, using library or framework, since that’s how handle programming on web pages.
however, possible achieve basic functionality of single-page application using html , css only. functionality means page has content of entire site , selected part of visible. use :target, refers element target of recent link followed. (the :active pseudo-class different: refers link or equivalent when has been activated, typically clicking on it, , before has been followed – normally, short time.)
minimal example:
<!doctype html> <meta charset=utf-8> <style> .section { display: none } .section:target { display: block } </style> <div class="nav-bar"> <ul class="nav"> <li><a href=#about>about</a></li> <li><a href=#contact>contact</a></li> <li><a href=#other>other</a></li> </ul> </div> <div id=about class=section> </div> <div id=contact class=section> contact </div> <div id=other class=section> other stuff </div> this not work e.g. on ie 8 , older (which not support :target), 1 of reasons why rather theoretical approach.
Comments
Post a Comment