jQuery change text in div using the "data" attribute -

in jquery tabs ui, i'm using function (thanks so'ers) change css of div in order show particular image according data-image attribute of active tab.

function:

var img = $(ui.panel).data("image"); $("#headerwrapper") .animate({ opacity: 'toggle' }, function() { $(this).css("background-image", "url(" + img + ")") .animate({ opacity: 'toggle' }); }); } 

html , css:

html in tabs structure:

<div id="home" data-image="/images/water.jpg">tab content</div  <div id="about" data-image="/images/office.jpg">tab content</div>    ...more tabs... 

css (water.jpg default when no data-image present):

#headerwrapper {background: url(images/water.jpg);} 

so can correctly credit photographer when image shown: how change function (see below) in order use corresponding data attribute called credit change text of active tab? , can 1 have 2 different data attributes in html? or there better way?

function:

var img = $(ui.panel).data("credit"); $("#headerwrapper") .animate({ opacity: 'toggle' }, function() {  $(this).css("background-image", "url(" + img + ")") //what goes here in order                                                     //change data-credit                                                     //in div photocredit? .animate({ opacity: 'toggle' }); }); } 

html: in tabs structure:

<div id="home" data-image="/images/water.jpg" data-credit="photog1">tab content</div  <div id="about" data-image="/images/office.jpg" data-credit="photog2">tab content</div>        ...more tabs... 

in site footer (outside of #headerwrapper) :

<div id="photocredit"></div> 

and, css #photocredit? this: #photocredit {}

use attr function change attribute of div tag:

$(this).attr("data-credit", "photographer...");