私はテキスト情報を含む3つのタブでjquery画像スライダーを使用しています。各タブで異なる背景画像を指定し、タブにホバーまたはアクティブな効果があるときに他の画像に変更したいのですが、それを除くすべてのブラウザーでうまく機能しますIE(IE7、8、9でテスト済み)。IEでは、いずれかのタブがアクティブになると、その背景画像がtab3(最後のタブ)のアクティブな背景画像に変わります。追加情報が必要な場合はお知らせください。以下は私のhtmlコードとそのcssです:
<div id="featured_slide">
<div id="featured_wrap">
<ul id="featured_tabs">
<li class="tb1"><a href="#fc1">A<br />
<span>test message1.</span></a></li>
<li class="tb2"><a href="#fc2">B<br />
<span>test message2.</span></a></li>
<li class="tb3"><a href="#fc3">C<br />
<span>test message3</span></a></li>
</ul>
<div id="featured_content">
<div class="featured_box" id="fc1"><img src="images/Main1.png" alt="" />
</div>
<div class="featured_box" id="fc2"><img src="images/Main2.png" alt="" />
</div>
<div class="featured_box" id="fc3"><img src="images/Main3.png" alt="" />
</div>
</div>
</div>
<style>
#featured_slide ul#featured_tabs li.last
{
border-bottom:none;
}
#featured_slide ul#featured_tabs li.tb1
{
background:url("../images/Slider1.png") top right no-repeat transparent;
}
#featured_slide ul#featured_tabs li.tb2
{
background:url("../images/Slider2.png") top right no-repeat transparent;
}
#featured_slide ul#featured_tabs li.tb3
{
background:url("../images/Slider3.png") top right no-repeat transparent;
}
#featured_slide ul#featured_tabs li.tb1 a:hover
{
background:url("../images/Slider1Active.png") top right no-repeat transparent;
}
#featured_slide ul#featured_tabs li.tb2 a:hover
{
background:url("../images/Slider2Active.png") top right no-repeat transparent;
}
#featured_slide ul#featured_tabs li.tb3 a:hover
{
background:url("../images/Slider3Active.png") top right no-repeat transparent;
}
#featured_slide ul#featured_tabs li.tb1.ui-tabs-selected a
{
background:url("../images/Slider1Active.png") top right no-repeat transparent;
}
#featured_slide ul#featured_tabs li.tb2.ui-tabs-selected a
{
background:url("../images/Slider2Active.png") top right no-repeat transparent;
}
#featured_slide ul#featured_tabs li.tb3.ui-tabs-selected a
{
background:url("../images/Slider3Active.png") top right no-repeat transparent;
}
</style>