jquery paging - elements nested in href don't link to correct pages

Question

So I'm using jquery to access different pages within the same body. Clicking the li space links to the correct page, however clicking anywhere near the img/icon (contained in a div) or the text (contained in a span) switches to a completely blank page. Suggestions?

For the ease of demo, I've switched the img div to a bordered box for placement. The extra js is for animation I also removed for the sake of keeping this a bit smaller.

fiddle link: http://jsfiddle.net/nL4D6/

HTML

<div id="wrapper">
    <div id="content">
        <div id="pages">
            <div id="page1" class="current">
            <p>page 1</p>
            </div>
            <div id="page2">
            <p>page 2</p>
            </div>
            <div id="page3">
            <p>page 3</p>
            </div>
        </div>
</div>
</div>
<footer>
    <ul id="tab-bar">
        <li>
            <a href="#page1"><div id="img1"></div><span>Page1</span></a>
        </li>
        <li>
            <a href="#page2"><div id="img2"></div><span>Page2</span></a>
        </li>
        <li>
            <a href="#page3"><div id="img3"></div><span>Page3</span></a>
        </li>
    </ul>
</footer>

CSS

#wrapper
{
position:absolute;
z-index:1;
top:45px;
bottom:48px;
width:100%;
overflow:auto;
}

#content {
position:absolute;
z-index:1;
width:100%;
padding:0;
}

#pages
{
position: relative;
}

#pages > div
{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
}

#pages > div.current
{
display: block;
}

#tab-bar
{
margin: 0;
padding: 0;
position: fixed;
bottom: 0;
width: 100%;
z-index: 900;
}

#tab-bar li
{
display: inline;
float: left;
border-left: 1px solid #000000;
width: 33.333%
}

#img1
{
display: block;
position: relative;
margin: 0 auto 2px auto;
background-color: #ffffff;
border: 1px solid blue;
width: 32px;
height: 32px;
opacity: 0.5;
}

#img2
{
display: block;
position: relative;
margin: 0 auto 2px auto;
background-color: #ffffff;
border: 1px solid blue;
width: 32px;
height: 32px;
opacity: 0.5;
}

#img3
{
display: block;
position: relative;
margin: 0 auto 2px auto;
background-color: #ffffff;
border: 1px solid blue;
width: 32px;
height: 32px;
opacity: 0.5;
}

#tab-bar a
{
color: #ffffff;
background: #ab1b1b;
display: block;
font-weight: bold;
overflow: hidden;
position: relative;
text-align: center;
font-size: 0.9em;
text-decoration: none;
padding: 6px 0 2px 0;
-webkit-touch-callout: none;
}

#tab-bar a:hover
{
background: #d43333;
}

#tab-bar a:hover > #img1,
#tab-bar a:hover > #img2,
#tab-bar a:hover > #img3
{
opacity: 1;
}

JS

$('#tab-bar a').on('click', function(e){
    e.preventDefault();
    var nextPage = $(e.target.hash);
    page(nextPage); //You need to add this for it to work
    $("#pages .current").removeClass("current");
    nextPage.addClass("current");
})

function page(toPage) {
    var toPage = $(toPage),
            fromPage = $("#pages .current");
    if(toPage.hasClass("current") || toPage === fromPage) {
        return;
    };
    toPage.addClass("current fade in").one("webkitAnimationEnd", function(){
        fromPage.removeClass("current fade out");
        toPage.removeClass("fade in")
    });
    fromPage.addClass("fade out");
}

Answer 1

The problem with your approach was using the $(e.target.hash)

target always corresponds to the element that was clicked. currentTarget corresponds to element to which the event was bound to.

So when you click on the image element your target points to image and not anchor.

Instead of

var nextPage = $(e.target.hash);

Try this instead

var nextPage = $(e.currentTarget.hash);

Or Better

var nextPage = this.hash;