0

Web サイトで特定の機能を必要としているクライアントがいますが、それを行う方法に少し困惑しています。

基本的に、既存のサイトをチェックすると、4 つの丸いボタンが表示されます。

彼らが望んでいるのは、誰かが下のテキスト行のボタンの 1 つにカーソルを合わせる (または iPad を使用している場合はクリックする) と、現在「プロの手話通訳、コンサルティング、およびロジスティクス」と表示されていて、別の何かに変わるためです。

たとえば、「Phone Us」ボタンにカーソルを合わせると、「Professional Sign Language Interpreting, Consultancy, and Logistics」が「Call Us : +44(0) 999 999 9999」に変わります。

そのための最善の方法は何ですか？

編集

現在、別のスレッドで見つけたこのコードを使用しています。

$('.button').bind('hover', function() {
    // suppose <a id='about' class='menu'> tag
    $('p.tagline').hide(); // hide all texts
    $('#tag-' + this.id).show(); // show the one with id=text-about
});

これはうまくいきます。

切り替えるだけでなく、クリックまたはホバーで機能させ、フェードイン/フェードアウトする方法はありますか?

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

4

3 に答える 3

3

次のようなことができます。

var texts = {
    default: 'Professional Sign Language Interpreting, Consultancy, and Logistics',
    email: 'Email text',
    phone: 'Call us +11111111111',
    twitter: 'Twitter adfa df asd',
    about: 'About us text here'
},

$text = $('.content p');
$('.button').on('mouseover click', function () {
    $text.text(texts[$(this).data('class')]);
})
.on('mouseout', function() {
    $text.text(texts.default);
});

http://jsfiddle.net/NJvFP/

したがって、すべてのテキストをオブジェクトに保存し、データ属性を使用して対応するメッセージを参照します。

iPadの場合、ボタンをクリックしたときに状況を処理する必要があり、その後、彼が別の場所をクリックした場合は、デフォルトのテキストを元に戻す必要があります.

于 2013-04-19T10:04:02.930 に答える
0

hover以下に示すように、電話ボタンの jQuery コードを jQuery コードに追加します。

$(document).ready(function(){

$("div.phone").hover(
  function () {
    $("div.homepage-content p").html("Call Us : +44(0) 999 999 9999");
  },
  function () {
    $("div.homepage-content p").html("Professional Sign Language Interpreting, Consultancy, and Logistics");
  }
);

});

hover同様に、テキストを指定して他の3つのボタンに機能を追加しhtml()、$("div.homepage-content p").html("Call Us : +44(0) 999 999 9999");

于 2013-04-19T10:11:20.747 に答える