Redirect to a Anchor of a page an action click event on it

Question

So I have an UL tag with several LI's every LI has his own UL. On desktop device, the second UL displays Block by hovering the first level LI. But on the Mobile device I want to make it on click.

In the header, I have a Contact Us button, that triggers a click event on that LI so the Contact Us text appears, this works fine only if this happens on the page with the contact field, but if I'm on a another page I don't know how to target that page and make a click action on it.

I think its something like, detecting the link in the URL, if after has a hash tag take that tag find it in page, if you find it make a Click event on it.

But I don't really know how to write the code for it.

The HTML structure looks something like this :

<div id="ClickForContact">Contact Us</div>



<ul>
  <li>
     <a>Something else</a>
  </li>
  <li>
    <a id="contact">Contact</a>
    <ul class="subMenu" >
        <li>
            <p>Some text here and there.</p>
        </li>
    </ul>
   </li>
 </ul>

http://jsfiddle.net/QkB9T/1/

So any help here?

you can grab the URL with a `GET` method. If you can use PHP — Déjà vu, Jun 06 '14 at 13:40
I know, but I want a clean solution and mostly JQuery,Javascript. — Robert Voicu, Jun 06 '14 at 13:43
Possible duplicate: http://stackoverflow.com/questions/1822598/getting-url-hash-location-and-using-it-in-jquery — bloodyKnuckles, Jun 06 '14 at 13:45
Thanks very much for the duplicate post, it helped me find an answer, I will post below my own answer — Robert Voicu, Jun 06 '14 at 14:19

score 0 · Answer 1 · answered Jun 06 '14 at 13:45

0

Do you mean like this? http://jsfiddle.net/QkB9T/2/

HTML

<a href="#contact">Contact Us</a>
<ul>
    <li>
        <a>Something else</a>
    </li>
    <li>
        <a id="contact">Contact</a>
        <ul class="subMenu" >
            <li>
                <p>Some text here and there.</p>
            </li>
        </ul>
    </li>
</ul>

CSS

    .subMenu{
    display:none;
}

ul li:hover .subMenu,
ul li a:target + .subMenu{
    display:block;
}

answered Jun 06 '14 at 13:45

KnutSv

748
5
9

Just like that, but want this action even from a another page, something like : what you made is the homepage, and I'm on the Team page and the Button that you made clickable is in the header so when I click it I want to get redirected to the Homepage + that action you made in JsFiddle – Robert Voicu Jun 06 '14 at 13:49
Then the link would be: Contact us – KnutSv Jun 06 '14 at 13:51

score 0 · Accepted Answer · edited May 23 '17 at 10:32

On the page the contact button is I made this javascript:

<script type="text/javascript">
$(document).ready(function(){
    var url = window.location.hash;
    var hash = url.substring(url.indexOf('#')); // '#foo'
    if(hash == '#contactUs'){
        setTimeout(function(){
            $('#contactUs').click();
            window.clearTimeout();
        },500);

    }
});
</script>

and in the header I put :

<a href="<? echo base_url . '#contactUs'; ?>">Contact</a>

Inspiration came from this post : Getting URL hash location, and using it in jQuery

Redirect to a Anchor of a page an action click event on it

2 Answers2