-2

このワードプレスのホームページには、コンテンツ セクション (3 列の div がある中央セクション) の次の html があります。

http://goodsense.etempa.co.uk

<div class="seewidgets">[widgets_on_pages id="Home page middle box"]</div>

<div class="top-area">
    <div class="image">
        <img alt="Primary Care" src="/wp-content/uploads/scenarios/primary_care.png" />
    </div>

    <div id="contact_box" class="home_side_box">
        <div class="clients">
            <img alt="Contact Us" src="/wp-content/uploads/buttons/contact_button.png" />
        </div>
    </div>

    <div class="home_side_box home_side_box_gap">
        <div class="home_side_box_heading">Social Media</div>
            //Social Media Stuff
        </div>

        <div class="home_side_box home_side_box_gap">
            <div class="home_side_box_heading">Example Clients</div>
                <div class="clients">
                    <img alt="" src="/wp-content/themes/twentytwelve/images/client.png" />           
                </div>
            </div>

            <div class="home_text_box" id="scenario_intro_text_div">
                <p>If you work in primary healthcare you know that anything can happen. </p><p>Your staff may be required to handle a difficult ... <a href='/primary-care'>Read More</a></p>
            </div>
        </div>
    </div>
</div>

ご覧のとおり、左側にセクターのリストがあります。これは wordpress メニュー、中央の画像、中央のテキスト、右側にクライアントの例です。

このウェブサイトはワードプレスで書かれており、上記のコンテンツはテンプレートではなくWordpressの「ページの編集」部分に入力されていることを念頭に置いて（私はテンプレートファイルに完全にアクセスできますが）、誰でもできる方法を教えてもらえますかユーザーが左側のセクターにカーソルを合わせると、中央の画像、中央のテキスト、右側のクライアント画像がすべて、カーソルを合わせたセクターに合わせて変化しますか?

私が抱えている主な問題は、セクターのリストがWordpressメニューにあることです。可能であれば、そのままにしておきたいのですが、必要に応じてハードコーディングできます。

4

1 に答える 1

2

jQuery を使用する必要があります。

これで始められるはずです：

$('#menu-item-65').mouseover(function() {
    // when element is moused over, change html elsewhere on page
    $('.top-area .image').html('<img src="path/to/your/image.jpg" />');
    $('.home_side_box .clients').html('<img src="path/to/your/other/image.jpg" />');
    $('#scenario_intro_text_div').html('<p>Your text here</p>');
});

最初の行は基本的に、#menu-item-65(左側の「セクター」ナビゲーション メニューからの個々の のいずれかの id li) がマウスオーバーされると、関数内で対象となる要素の内部 HTML を指定したものに置き換えることを意味します。

関連リンク:

テーマにはすでに jQuery が読み込まれているため、これをカスタム スクリプト ファイルに含めて、読み込まれていることを確認するだけです (スクリプト呼び出しを in に配置するか、 in 経由でheader.php追加します)。wp_enqueue_scriptfunctions.php

于 2013-05-08T17:20:14.810 に答える