Question

Suppose I have a navigation menu that works by using Javascript to hide or show the respective div.

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>

<script>

$("#tabs a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr('href');
    $(toShow).show();
});

</script>

I know I should be using the <noscript></noscript> tag to facilitate users who do not have Javascript enabled.

Question

How should I go about doing this?

For javascript disabled users, I want to allow them to click “Home” or “Contact Me” and be taken to “home.php” or “contact.php” respectively.

Answer 1

This should work:

<ul>
<li><a data-target="#home" href="home.php">Home</a></li>
<li><a data-target="#contact" href="contact.php">Contact Me</a></li>
</ul>

<script>

$("#tabs a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).data('target');
    $(toShow).show();
});

</script>

With noscript you can add another menu, but can’t change available one. Having something like above, people with no js will not trigger click handler and default get will be executed. If js is enabled, click function will be executed and e.preventDefault will stop browser from redirect to another page.

This solution also does not require duplicated menus. Once you need to change it somehow, you will need to change HTML of two menus actually, not one.