Adding links to jQuery tabs

Question

I'm working on a project for my JavaScript class, and I don't know how to edit this jQuery where when you select a tab, it will bring you to a new page. I try adding "a href" to the body, but it doesn't look right. Is there a piece of code I have to enter in the jQuery so when you choose "About" that it will bring you to the actual page? Here's the code:

jQuery

function handleEvent(e) {
    var el = $(e.target);
    if (e.type == "mouseover" || e.type == "mouseout") {
        if (el.hasClass("tabStrip-tab") && !el.hasClass("tabStrip-tab-click")) {
            el.toggleClass("tabStrip-tab-hover");
        }
    }
    if (e.type == "click") {
        if (el.hasClass("tabStrip-tab-hover")) {
            var id = e.target.id;
            var num = id.substr(id.lastIndexOf("-") + 1);

            if (currentNum != num) {
                deactivateTab();
                el.toggleClass("tabStrip-tab-hover")
                    .toggleClass("tabStrip-tab-click");
                showDescription(num);
                currentNum = num;
            }
        }
    }
}

function deactivateTab() {
    var descEl = $("#tabStrip-desc-" + currentNum);
    if (descEl.length > 0) {
        descEl.remove();
        $("#tabStrip-tab-" + currentNum).toggleClass("tabStrip-tab-click");
    }
}

$(document).bind("click mouseover mouseout", handleEvent);

HTML

<div class="tabStrip">
    <div id="tabStrip-tab-1" class="tabStrip-tab">Home</div>
    <div id="tabStrip-tab-2" class="tabStrip-tab">About</div> 
    <div id="tabStrip-tab-3" class="tabStrip-tab">Contact</div>
    <div id="tabStrip-tab-3" class="tabStrip-tab">Gallery</div>
</div>

Answer 1

add this to your handler if you need a new page..

window.open('url', 'window name', 'window settings');

or this if you want to redirect the actual view

window.location.href('url');

furthermore this should be a better choice:

$('div[id^=tabStrip-tab]').bind("click mouseover mouseout", handleEvent);

now only the 'tabStrip-*' id´s will trigger the events/handler

Answer 2

The best solution for your problem is to put hidden div with content for every tab you have. All you have to do is display the current div depending which tag is selected. The another solution is using ajax and then you have a template for the content and you fill the template with the data you have received.