jQuery change text in div using the "data" attribute
<p>In jQuery Tabs UI, I'm using this function (thanks to SO'ers) to change the CSS of a div in order to show a particular image according to the data-image attribute of the active tab.</p>

<p><strong>Function:</strong></p>

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

<p><strong>HTML and CSS:</strong></p>

<p>html in the tabs structure:</p>

<pre><code>&lt;div id="home" data-image="/images/water.jpg"&gt;tab content&lt;/div

&lt;div id="about" data-image="/images/office.jpg"&gt;tab content&lt;/div&gt;

  ...more tabs...
</code></pre>

<p>css (water.jpg is default when no data-image is present):</p>

<pre><code>#headerwrapper {background: url(images/water.jpg);}
</code></pre>

<p>So I can correctly credit the photographer when their image is shown: how would I change that function (see below) in order to use a corresponding data attribute called credit to change the text of  with the active tab? And can one have two different data attributes in the html? Or is there a better way?</p>

<p><strong>Function:</strong></p>

<pre><code>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 the div photocredit?
.animate({ opacity: 'toggle' });
});
}
</code></pre>

<p><strong>HTML:</strong>  in the tabs structure:</p>

<pre><code>&lt;div id="home" data-image="/images/water.jpg" data-credit="Photog1"&gt;tab content&lt;/div

&lt;div id="about" data-image="/images/office.jpg" data-credit="Photog2"&gt;tab content&lt;/div&gt;

      ...more tabs...
</code></pre>

<p>In the site footer (outside of #headerwrapper) :</p>

<pre><code>&lt;div id="photocredit"&gt;&lt;/div&gt;
</code></pre>

<p>And, what is the CSS for #photocredit? Just this: <code>#photocredit {}</code></p>
