HTML Wrapper state update based on current page

Question

I'm a complete beginner in HTML/CSS. I currently have a wrapper on my website with links which re-direct to different pages. My objective is to update the link to appear pressed when I am on the respective page.

An example of this is if you're on stack overflow and you click the "Jobs" page it will re-direct you to stackoverflow.com/jobs and that link is highlighted/pressed.

From my understanding, the way I've implemented the wrapper is by using containers.

<!-- Wrapper -->
  <div id="wrapper">
    <!-- Header -->
    <header id="header">
      <h1><a href="index.html">myname</a></h1>

        <nav class="links">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="resume.html">Resume</a></li>
            <li><a href="about.html">About</a></li>
          </ul>
        </nav>
     .
     .
     .

My project is a pre-made SASS theme which has a _wrapper.scss file. My intention is not to edit this file as I don't think I'm quite ready to learn how to compile SASS files and convert them to CSS, but is there an alternative way to get the result I want?

I'm familiar with the onmouseover and onmouseout events, however, is there an event for what I want to achieve?

Thanks!

score 1 · Accepted Answer · answered Feb 22 '19 at 01:53

To begin define a CSS class that you can assign to the li element to change it's appearance to show that it is pressed e.g.

li.pressed { font-weight: bold; }

You then need a way to apply this class to the correct li element based on the loaded page. If you simply cut and paste the navigation on each page you can do this manually e.g.

<li class="pressed"><a href="resume.html">Resume</a></li>

This approach will not scale well as you add more and more pages to your site. You need to be able to supply the page as a parameter to some script that will assign the class attribute for you.

The script you use could run on the client or the server. The way you can get the correct value for your parameter will depend on where your script runs.

A server-side script would use the information within the HTTP request for the page to match the href for the pressed button.

A client-side script would use the window.location property and then need to find the matching href for the pressed button.

This is perfect. Thank you for the in-depth explanation for scalability, the intended purpose is for a very simple online portfolio so this is exactly the fix I was looking for. In the future, I will consider using `window.location`. I also included a font color change within the CSS class to match the theme. — mcdouble, Feb 22 '19 at 04:19

score 0 · Answer 2 · answered Feb 22 '19 at 02:04

0

I believe what you are looking for is the :visited selector. Make a CSS file and do this:

 a:visited{
    color:black
}

<!-- Wrapper -->
  <div id="wrapper">
    <!-- Header -->
    <header id="header">
      <h1><a href="index.html">myname</a></h1>

        <nav class="links">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="resume.html">Resume</a></li>
            <li><a href="about.html">About</a></li>
          </ul>
        </nav>

answered Feb 22 '19 at 02:04

Ben Mikola

111
8

This results in styling all the links the same once they all have been visited. The browser chooses to apply this pseudo selector based on browser history. There are strict limits to what you can do with this, see [Privacy and the :visited selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector) – Dave Anderson Feb 24 '19 at 21:44

HTML Wrapper state update based on current page

2 Answers2