1

サイトのホームページに「ビルボード」を設置しています。ビルボードにはアクティブな画像が表示され、ビルボードの画像を変更するために使用される右側のサムネイルが表示されます。

このようなもの：

ビルボード

現在、次のように画像を交換しています。

        <div id="_bbImage">
        <img src="images/bill1.png" class="bbImage" id= "MainBB"/>
        </div><!--_bbImage-->

        <div id="_bbTab1" class="inactiveTab">
        <a href="images/bill2.png" onclick="swap(this); return false;">
            <img src="images/bbtab1.png" class="bbTabImg" id="bbTabImg1"  />
        </a>
        </div><!--bbTab1-->

JavaScript 関数は次のようになります。

function swap(image){document.getElementById("MainBB").src = image.href;}

しかし今、この効果を達成するために、サムネイルが選択されているか「アクティブ」になっているときに、サムネイルに別のクラスを持たせたいと思います。 ここに画像の説明を入力

クラスをアクティブに切り替える必要がありますが、以前に選択したタブが再び「非アクティブ」クラスに設定されるようにする必要もあります。

私はこのようなことを試しました：

function inactiveTab(name){document.getElementById(name).className = "inactiveTab";}
function activeTab(name){document.getElementById(name).className = "activeTab";}
function inactiveTabAll(){
inactiveTab("_bbTab1");
inactiveTab("_bbTab2");
inactiveTab("_bbTab3");
inactiveTab("_bbTab4");
inactiveTab("_bbTab5");
inactiveTab("_bbTab6");

}

と：

<div id="_bbTab1" class="inactiveTab">
        <a href="images/bill1.png" onclick="swap(this); inactiveTabAll(); activeTab("_bbTab1"); return false;">
            <img src="images/bbtab2.png" class="bbTabImg" id="bbTabImg1"  />
        </a>
</div><!--bbTab1-->

しかし、これは機能していないようです。サムネイルをクリックすると、「image/bill2.png」画像が表示された空白のページにリンクされます。

これを達成するための良い方法を知っている人はいますか、それとも誰かが私を正しい方向に向けることができますか?

前もって感謝します、

ロブ

4

3 に答える 3

3

私の意見では、次のjqueryメソッドを見ることができます：

http://api.jquery.com/hover/

コンテンツを表示/非表示にできるコールバック関数があります。

「inactivateTab」関数の代わりに、「非表示」メソッドを使用できます。

http://api.jquery.com/hide/

于 2012-11-08T15:19:23.337 に答える
0

問題は、タグ内の画像にhrefを使用していることです。タグは元々、指定されたURLへのリンクです。href="xx.png"をhref="javascript：swap（this）; activeTabAll（）; activeTab（" _ bbTab1 "）;"に置き換えます。

あなたのコードでのhrefの本来の役割はわかりませんが、とにかくそれを使用していないようです

于 2012-11-08T15:23:09.807 に答える
0

img要素の代わりにdivs を使用し、画像を背景に配置します (background-imageスタイルを使用)。これにより、純粋な CSS でどの画像をどこに表示するかを定義できます。クラスを追加/削除して画像を交換することもできます。

.bbTabImg { background-image: url(images/bbtab1-inactive.png); }
.bbTabImg.active { background-image: url(images/bbtab1.png); }

非アクティブについては、次の jQuery を使用します。

$('.active').removeClass('active');

これにより、クラスを持つすべての要素が検索され、activeオフになります。そのうちの 1 つを再度アクティブに設定すると、上記の CSS が正しい画像をロードします。

于 2012-11-08T15:33:29.670 に答える