0

私はこのプロジェクトに取り組んでおり、3 つの製品がリストされている場所にこの機能を追加する必要があります。

それらは div として開始されましたが、領域全体をリンクするために ahref クラスに変更されました。

ホバーするとボックスの色が変わる必要があります-私はこれを行いました。ボックスをクリックすると、別の色に変更する必要があります。これも行っています。

私が理解できないことの1つは、2番目のボックスを選択済みとしてデフォルトにする方法ですが、別のボックスが選択されたときに色をオフにする方法です

これは私がページ用に持っているjavascriptです。

var highlightLink = function () {
    var active = null, colour = '#f6efa2';
    if (this.attachEvent) this.attachEvent('onunload', function () {
        active = null;
    });
    return function (element) {
        if ((active != element) && element.style) {
            if (active) active.style.backgroundColor = '';
            element.style.backgroundColor = colour;
            active = element;
        }
    };

}();

これがボックスの1つです

<a class="productBox1" href="#" border="0" onclick="highlightLink(this);">

body タグに onload 関数が必要だと思っていますが、必要なコードがわかりません。また、別のボックスが選択されたときに選択を解除する必要があります。

どんな助けでも大歓迎です。

4

2 に答える 2

1

これを実際よりも複雑にしているように聞こえます。これを試してください（すべてのタグにクラスproductBox1があると想定しています）：

$('.productBox1').click(function() {
    $('.highlighted').removeClass('highlighted');
    $(this).addClass('highlighted');
});

次に、強調表示されたという名前の css クラスを用意しますbackground-color: #f6efa2。これを正しく機能させるには、 jQueryが必要です。

于 2011-01-13T14:19:49.540 に答える
1

とにかくすべてのリンクに独自のクラスがある場合は、代わりにそれを ID として使用します。

<a id="productBox1" href="#" border="0" onclick="highlightLink(this);">

共通のプロパティにはクラスを使用します。単一の要素を識別するには、ID を使用します。

<body>次に、これをページの下部 (終了タグの上) に追加できます。

<script type="text/javascript">
    highlightLink(document.getElementById('productBox1'));
</script>

または設定

window.onload = function() {
    highlightLink(document.getElementById('productBox1'));
}

で<head>。

于 2011-01-13T14:28:08.927 に答える