Question

$(function(){
    $('.tab2').live('click', function() {
      $('#coverTextH3').text(data[1].H3)
      $('#coverTextP').text(data[1].P)
        });
           });

Lets say I have a link <a href="www.link.com"></a> How do I pass data, the index of an array, to a jQuery function so I do not have to repeat my code, for each index [0]-[7]?

 var data = [
    {
        H3: 'name',
            p: 'more'

    },
    {
        H3: 'string',
        p: 'more strings'
     }]

Answer 1

There are numerous options. If attaching handlers via javascript, I would select basing on element’s id or some custom attribute, not the class. So say you have a number of links like this:

<a href="#" class="tab1" link-number="1">Tab 1</a>
<a href="#" class="tab2" link-number="2">Tab 2</a>
<a href="#" class="tab3" link-number="3">Tab 3</a>        

javascript in this case would be

$(function(){
    $('a[link-number]').live('click', function() {
        var index = $(this).attr('link-number') * 1 - 1;
        $('#coverTextH3').text(data[index].H3)
        $('#coverTextP').text(data[index].P)
    });
});

Alternatively, you can attach click handlers right in your a elements declaration:

<a href="#" class="tab1" onclick="setCover(0)">Tab 1</a>
<a href="#" class="tab2" onclick="setCover(1)">Tab 1</a>
<a href="#" class="tab3" onclick="setCover(2)">Tab 1</a>

and define setCover function like this:

function setCover(index) {
    $('#coverTextH3').text(data[index].H3)
    $('#coverTextP').text(data[index].P)
}

Each of alternatives require changes in your htlm. If for some reason it is not possible, you need to at least now the range of your tabs, which can be quite tricky.