Question 36477 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jQuery function not working if anchored link clicked in different page

My simple jQuery function works fine if I click an anchored link on page-1 (body turns black fine) BUT if I have the same anchored link on another page-2 to link back and anchor to my page-1 the function doesn’t work? It goes back to page-1 fine but body on page-1 doesn’t turn black as expected?

HTML on page-1:

<div id="offcanvas">
  <a href="#key-features" class="nav-link">
  <span>Key features</span>
  </a>
</div>

HTML on page-2:

<div id="offcanvas">
  <a href="page-1.htm#key-features" class="nav-link">
  <span>Key features</span>
</a>
</div>

jQuery:

$("#offcanvas a").click(function(){
    $('.offcanvas').offcanvas('hide');
    $("body").css('background-color', '#000000')
});

Many thanks in advance for your help.
B]

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So I manage to find the solution, this works:

    $("#offcanvas a").on("click", function() {
    if (window.location.hash) {
      $("body").css('background-color', 'black');
}

    :)


  2. 0

    please use below html structure
    you have not define id on html structure

    <div id="offcanvas">
  <a href="#key-features" class="nav-link">
    <span>Key features</span>
  </a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search