Current selected item when some links are the same

Question

I'm trying to create a stacked navigation list that highlights which item you have selected. It looks like this.

<div class="page-list">
    <ul class="nav nav-pills nav-stacked">
      <li><a href="Page1.html" > Page1 </a></li>
      <li><a href="Page2.html" > Page2 </a></li>
      <li><a href="Page3.html" > Page3 </a></li>
      <li><a href="Page4.html" > Page4 </a></li>
      <li><a href="Page5.html" > Page5 </a></li>
      <li><a href="Unavailable.html" > Page6 </a></li>
      <li><a href="Unavailable.html" > Page7 </a></li>
    </ul>
</div>

The issue I am having is that the last two pages share the same link and I cant seem to get just the selected page to be highlighted in the list.

I was using this for my JavaScript.

<script>
    $(function(){
        $('a').each(function() {
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('current');
            }
        });
    });
</script>

But this causes all links to the same page to highlight.

I tried solving it with this, but now no links highlight when clicked.

<script>
    $(".page-list a").click(function() {
        $(this).parent().previoussibling().find('a').removeClass('current');
        $(this).addClass("current");
    });
</script>

Adding an anchor to the href might work. Have you tried `href="Unavailable.html#1` and `href="Unavailable.html#2`? They will both link to the same page however are unique links for JS — Alexei Darmin, Nov 20 '15 at 22:19
I'd consider a `location.hash` for each href, and just using that approach for all of the links. I.e., perhaps assign the location hashes to an ID for each `li` or something like that. Then you don't care if your page names change. — Marc, Nov 20 '15 at 22:33

score 0 · Accepted Answer · edited May 23 '17 at 12:30

One way to fix this would be to create a query string to indicate which link should be highlighted.

...
<li><a href="Unavailable.html?page=6" > Page6 </a></li>
<li><a href="Unavailable.html?page=7" > Page7 </a></li>
...

Then in Javascript, read the query string and decide which page to highlight. This StackOverflow question can help you read the query string.

You could also accomplish this by using cookies if you don't want your users to see www.yourwebsite.com/Unavailable.html?page=7. See this tutorial for using cookies in JavaScript. There are a number of libraries out there that can help you when using cookies if you prefer that route.

Which ever way you choose to pass the information on to the next page, you will need to add an id to the a tags (or some other way to uniquely identify each link) so you can highlight the appropriate link.

Here is an example using the query string idea:

<div class="page-list">
    <ul class="nav nav-pills nav-stacked">
        ...
        <li><a id="6" href="Unavailable.html?page=6" > Page6 </a></li>
        <li><a id="7" href="Unavailable.html?page=7" > Page7 </a></li>
    </ul>
</div>

<script>
    $(function(){
        $('a').each(function() {
            if ($(this).attr('id') == getParameterByName('page')) {
                $(this).addClass('current');
            }
        });
    });

    function getParameterByName(name) {
        //this code is taken directly from https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript#answer-901144
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
</script>

Current selected item when some links are the same

1 Answers1