Prevent HREF links

Prevent clicks on <a> tags to go to their HREF url. Instead, run a script. The script only overrides the default behavior when the hamburger button is shown.

by Wil Chow

HTML

<div id="hamburger_button" class="mobile">
	hamburger_button
</div>
<ul>
	<li id="google"><a href="http://google.com">google</a></li>
	<li id="twitter"><a href="http://twitter.com">twitter</a></li>
	<li id="facebook"><a href="http://facebook.com">facebook</a></li>
	<li id="linkedin"><a href="http://linkedin.com">linkedin</a></li>
</ul>

JavaScript

$("ul li a").click(function (event) {
    // a tag overide only happens if #hamburger_button is display: block
    if ($("#hamburger_button").css("display") == "block") {
        event.preventDefault(); // Prevent default a tag behavior of opening the href
        var href = $(this).attr("href"); // sets href to the a tag href

        // DO YOUR MOBILE STUFF
        alert("not going to " + href);
    }

})