Question

I have a jQuery tabs script found here. What I am trying to do is add a class of “left” to one of them and a class of “right” to another one. I am doing this because the border radius is different for the left and right side.

Since this script puts together my tabs, I can’t just go in and add it how I want so I need a little help. Specifications should have a left class, and Features should have a right class.

How can I add more information to the variable Tabs, and tell it which class to use?

Part of my code is:

var Tabs = {
    'Specifications'    : 'test.php?action=specifications',
    'Features'  : 'test.php?action=features',
}

/* Looping through the Tabs object: */
var z=0;
$.each(Tabs,function(i,j){
    /* Sequentially creating the tabs and assigning a color from the array: */
    var tmp = $('<li><a href="#" class="tab">'+i+'</a></li>');

    /* Setting the page data for each hyperlink: */
    tmp.find('a').data('page',j);

    /* Adding the tab to the UL container: */
    $('ul#tab').append(tmp);
})

Thanks in advance!

Answer 1

Add more data to your initial Tabs object:

var Tabs = {
    'Specifications':{class:"left",url:'test.php?action=specifications'},
    'Features':{class:"right",url:'test.php?action=features'}
}

/* Looping through the Tabs object: */
var z=0;
$.each(Tabs,function(i,j){
    /* Sequentially creating the tabs and assigning a color from the array: */
    var tmp = $('<li><a href="#" class="tab">'+i+'</a></li>')
        /* Setting the page data for each hyperlink: */
            .find('a')
            .addClass(j.class)
            .data('page',j.url)
            .end()
        /* Adding the tab to the UL container: */
        .appendTo($('ul#tab'));
})