CODEWITHSUNDEEP
javascriptjqueryjquery-uinavigationjquery-tabs
Cofey
Cofey

Reputation: 11404

How to add Navigation below tabbed content using jQuery UI Tabs?

I am using jQuery UI Tabs for a tabbed interface with panes that is using the default functionality. I would like to add additional navigation that appears outside of the .ui-tabs DIV that are just buttons contained inside an unordered list (in addition to the tabbed links at the very top).

Can someone tell me how to accomplish this?

Upvotes: 0

Views: 752

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

You can do this using the select method in the tabs API.

  1. Add an unordered list of buttons. I'm using the data attribute to associate a button with a tab:

    <ul>
    <li><button type="button" class="tabs-link" data-tab="#tabs-1">Nunc tincidunt</button></li>
    <li><button type="button" class="tabs-link" data-tab="#tabs-2">Proin dolor</button></li>
    <li><button type="button" class="tabs-link" data-tab="#tabs-3">Aenean lacinia</button></li>
</ul>

  2. Bind a click event handler to those buttons:

    $("button.tabs-link").bind("click", function($event) {
    $event.preventDefault();
    $("#tabs").tabs("select", $(this).data("tab"));
});

Here's a working example: http://jsfiddle.net/5ZnYC/

Upvotes: 1

Related Questions