Page Navigation No Code Bad Solution

When the focus moves to content other than one of the spans, all the display settings change. Not good.

by Blueprinter

HTML

<span class="span3" tabindex="0">Home Page</span>
<span class="span2" tabindex="0">Sign In</span>

<div class="homePg">This is the Home Page</div>
<div class="signIn">Please Log In</div>

CSS

body {
  display: block;
}
.span3:focus ~ .signIn {
  display: none;
}

.span3:focus ~ .homePg {
  display: block;
}

.span2:focus ~ .signIn {
  display: block;
}

.span2:focus ~ .homePg {
  display: none;
}