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>

it is common with tabs,menus etc, to use <a> element with href i.e. <div id="tabStrip-tab-1" class="tabStrip-tab"><a href=#>Home</a></div> — melc
– melc, Commented Oct 19, 2013 at 18:14

Alex Tape · Accepted Answer · 2013-10-19 18:28:11Z

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

edited Oct 19, 2013 at 18:28

answered Oct 19, 2013 at 18:21

Alex Tape

2,3014 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kliment · Accepted Answer · 2013-10-19 18:20:30Z

0

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.

answered Oct 19, 2013 at 18:20

Kliment

2,2503 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

Adding links to jQuery tabs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related