1

ホバー時にdivを交換/変更する単純なjqueryスクリプトを知っている人はいますか?

例えば

私は3つのli要素を持っています:

<ul>
   <li><a href="#" id="link1">Link1</a></li>
   <li><a href="#" id="link2">Link2</a></li>
   <li><a href="#" id="link3">Link3</a></li>
</ul>

3 つの DIV コンテナーがあります。

<div id="container1">content 1</div>
<div id="container2">content 2</div>
<div id="container3">content 3</div>

そのため、ページを開いたときに DIV #container1 を表示し、#container2、#container3 を非表示にします。次に、ユーザーが "HOVER" link2 または link3 すると、#container1 が非表示になり、#container2 または #container3 が表示されます。あなたが私の見解を得たことを願っています。

誰かが助けたいなら、私はフィドルを作りました。

4

2 に答える 2

3 
$('#container2, #container3').hide();
$('li a').mouseover(function(){
    var idx= $(this).attr('id').substr(-1);
    $('#container1, #container2, #container3').hide();
    $('#container'+idx).show();
});

jsFiddle の例

于 2013-04-07T15:27:34.977 に答える
0

CSS で .container を display:none に設定する

フィドル: http://jsfiddle.net/calder12/nVx7a/14/

jquery:

$(".link").hover(function(){
   var whichOne = $(this).attr("id").substring(4);
    $(".container").each(function(){
   if($(this).attr("id")=="container"+whichOne)
   {   
       $(this).show();
   } else {
       $(this).hide();
   }
    });
});

HTML:

<ul>
       <li><a href="#" id="link1" class="link">Link1</a></li>
       <li><a href="#" id="link2" class="link">Link2</a></li>
       <li><a href="#" id="link3" class="link">Link3</a></li>
</ul>

<div id="container1" class="container">content 1</div>
<div id="container2" class="container">content 2</div>
<div id="container3" class="container">content 3</div>
于 2013-04-07T15:34:17.617 に答える