Skip to main content
use the link hash property rather than the full href
Source Link
zzzzBov
  • 526
  • 3
  • 15

Assuming you're using an expressive structure such as:

<nav>
    <a href="#content-wrap1" id="navItem1" class="navItem">One</a>
    <a href="#content-wrap2" id="navItem2" class="navItem">Two</a>
    <a href="#content-wrap3" id="navItem3" class="navItem">Three</a>
</nav>
<div id="content-wrap1" class="content-wrap">...</div>
<div id="content-wrap2" class="content-wrap">...</div>
<div id="content-wrap3" class="content-wrap">...</div>

You can then toggle the display of the content-wrap items in a short, expressive manner.

$('.navItem').on('click', function (e) {
    $('.content-wrap').hide();
    $($(this).attrprop('href''hash')).fadeIn(1000);
    e.preventDefault();
});

This does suggest changing the HTML, but only in ways that make the content semantic.

Assuming you're using an expressive structure such as:

<nav>
    <a href="#content-wrap1" id="navItem1" class="navItem">One</a>
    <a href="#content-wrap2" id="navItem2" class="navItem">Two</a>
    <a href="#content-wrap3" id="navItem3" class="navItem">Three</a>
</nav>
<div id="content-wrap1" class="content-wrap">...</div>
<div id="content-wrap2" class="content-wrap">...</div>
<div id="content-wrap3" class="content-wrap">...</div>

You can then toggle the display of the content-wrap items in a short, expressive manner.

$('.navItem').on('click', function (e) {
    $('.content-wrap').hide();
    $($(this).attr('href')).fadeIn(1000);
    e.preventDefault();
});

This does suggest changing the HTML, but only in ways that make the content semantic.

Assuming you're using an expressive structure such as:

<nav>
    <a href="#content-wrap1" id="navItem1" class="navItem">One</a>
    <a href="#content-wrap2" id="navItem2" class="navItem">Two</a>
    <a href="#content-wrap3" id="navItem3" class="navItem">Three</a>
</nav>
<div id="content-wrap1" class="content-wrap">...</div>
<div id="content-wrap2" class="content-wrap">...</div>
<div id="content-wrap3" class="content-wrap">...</div>

You can then toggle the display of the content-wrap items in a short, expressive manner.

$('.navItem').on('click', function (e) {
    $('.content-wrap').hide();
    $($(this).prop('hash')).fadeIn(1000);
    e.preventDefault();
});

This does suggest changing the HTML, but only in ways that make the content semantic.

Source Link
zzzzBov
  • 526
  • 3
  • 15

Assuming you're using an expressive structure such as:

<nav>
    <a href="#content-wrap1" id="navItem1" class="navItem">One</a>
    <a href="#content-wrap2" id="navItem2" class="navItem">Two</a>
    <a href="#content-wrap3" id="navItem3" class="navItem">Three</a>
</nav>
<div id="content-wrap1" class="content-wrap">...</div>
<div id="content-wrap2" class="content-wrap">...</div>
<div id="content-wrap3" class="content-wrap">...</div>

You can then toggle the display of the content-wrap items in a short, expressive manner.

$('.navItem').on('click', function (e) {
    $('.content-wrap').hide();
    $($(this).attr('href')).fadeIn(1000);
    e.preventDefault();
});

This does suggest changing the HTML, but only in ways that make the content semantic.