-1

I have links that lead to another page with different contents.

<ul class="menu">
   <li><a href="/services#item1" class="menu-btn">Item 1</a></li>
   <li><a href="/services#item2" class="menu-btn">Item 2</a></li>
   <li><a href="/services#item3" class="menu-btn">Item 3</a></li>
</ul>

This the code on the /services page:

<div class="menu-content item-1">Content item 1</div>
<div class="menu-content item-2">Content item 2</div>
<div class="menu-content item-3">Content item 3</div>

I found the bellow JS, but it works only when clicking on the anchor link on the same page.

var $content = $('.menu-content');

function showContent(type) {
$content.hide().filter('.' + type).show();
}

$('.menu').on('click', '.menu-btn', function(e) {
   showContent(e.currentTarget.hash.slice(1));
   e.preventDefault();
});

I need is to display only the content related to the anchor link when load the /services page.

MAZ
  • 222
  • 1
  • 14

1 Answers1

1

Once you change the page on websites ( not single page apps ) , javascript ' forgets ' what you have done before.

So for your logic to work it can't be inside a click event which happened on another page. It should be inside a document.ready or window.onload function.

You can use location.hash to get the # anchor from your url.

In the below example i changed the location.hash value to show you that the solution works. You can skip that first line and just use the next ones.

$(document).ready(function() {

  location.hash = "item1"; // skip this
  const myHash = location.hash.substr(1)
  $('.menu-content').hide().filter(`.${myHash}`).show();
  // or use : $('.menu-content').not(`.${myHash}`).hide()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-content item1">Item 1</div>
<div class="menu-content item2">Item 2</div>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • Thanks, it's very clear and works perfect ! just a question : Can this code works if `item1` is an ID and not a class, I mean : `
    Item 1
    ` ?     – MAZ Jan 29 '20 at 13:13
  • Yes. It's much more simple then. Use the `location.hash` directly in the filter ``$('.menu-content').hide().filter(location.hash).show();`` and you can skip the `substr` part – Mihai T Jan 29 '20 at 13:19
  • it's works when the hash on the URL `#item-x` is a dynamic value ? example : the URL is : `http://www.example.com/service#c2523` and the content is : `
    Content here
    `. I tried it on my site and not seems to be works if the hash change dynamically.     – MAZ Jan 29 '20 at 13:32
  • When does the `hash` change ? before entering the page ? is the hash the same as the id of the element ? – Mihai T Jan 29 '20 at 13:50
  • 1. I mean I have dynamic hash not standard, it change from page to another, it's not always `item-1` it can be `c-1252` or `a-5652` ... etc, depending on the id of the elements in the page. 2. yes, the hash is the same as the id of the element. – MAZ Jan 29 '20 at 14:03
  • Yes. It should work. But as i said in the answer and the code you need to skip the `location.hash = "item1"; ` . Don't use/write it in your code. I used it only for example purposes. THe rest of the code should be the same. – Mihai T Jan 29 '20 at 14:05
  • as you see in my example the JS hide all elements and don't show to element related to the hash https://ibb.co/gRHLpDZ – MAZ Jan 29 '20 at 14:18
  • Sorry I didn't see the change in the #comment106052682_59966314. Now it's works perfect! thanks – MAZ Jan 29 '20 at 14:49
  • glad i could help. CHEERS – Mihai T Jan 29 '20 at 15:40