0

アイテムのリストがあります。ホバリングしているアイテムに基づいて、関連付けられたコンテンツを含む 1 つの div のみを表示し、残りはすべて非表示にします。
リストには約 22 の項目があるため、22 の異なる div を切り替える (表示/非表示) 必要があります。

jQueryでこれを達成するための簡単な解決策はありますか?

これは、私が現時点で開始点として設定した方法です。

<div id="list-of-items">
    <ul>
        <li id="item1">item1</li>
        <li id="item2">item2</li>
        <li id="item3">item3</li>
        <li id="item...">19-more-items</li>
    </ul>
</div>

<div id="content1">content1</div>
<div id="content2">content2</div>
<div id="content3">content3</div>
<div id="content...">...</div>
4

6 に答える 6

0

すべてのコンテンツdivを.content-blockのようなもので分類します

<div id="list-of-items">
<ul>
    <li id="item1">item1</li>
    <li id="item2">item2</li>
    <li id="item3">item3</li>
    <li id="item...">19-more-items</li>
</ul>
</div>

<div class="content-block" id="content1">content1</div>
<div class="content-block" id="content2">content2</div>
<div class="content-block" id="content3">content3</div>
<div class="content-block" id="content...">...</div>

そして、cssですべてをdisplay：hide;に設定します。

次に、以下を使用します。

$(function(){

    $('#list-of-items').each(function(){

       $(this).on('mouseover',function(){
           var cur-id = $(this).attr('id');
           var content-id = cur-id.replace('item','content');
           $('.content-block').hide();
           $('#'+content-id).show();
       });

    });

});
于 2012-05-30T16:56:05.020 に答える
0

これを試して ：

$('#list-of-items li').mouseover(function() {
    // hide all content divs except `list-of-items`
    $('div').not('#list-of-items').hide();
    // show content div based on current li id
    $('#' + $(this).prop('id').replace('item','content')).show();
});

これは、 .mouseover() を使用してマウスオーバー イベント .not() をバインドし、.not ()を含むを除外し、.prop ()を使用して現在の要素のプロパティを取得します。divliid

classcontent s にa を追加した場合、次のように置き換えることがdivできます('div').not('#list-of-items').hide();$('.classofdivs').hide();

作業例はこちら

于 2012-05-30T16:58:55.477 に答える
0

下部の div をラップすると、これは少し簡単になります: http://jsfiddle.net/lucuma/Jfw5B/

<div id="list-of-items">
    <ul>
        <li id="item1">item1</li>
        <li id="item2">item2</li>
        <li id="item3">item3</li>
        <li id="item...">19-more-items</li>
    </ul>
</div>

<div id="contents">
<div id="content1">content1</div>
<div id="content2">content2</div>
<div id="content3">content3</div>
<div id="content...">...</div>
</div>​

$('#list-of-items li').on('mouseover', function() {

   $('#contents div').hide().eq($(this).index()).show();

});​

それらを何かの中にラップしたくない場合は、次のようにして非常に簡単に行うことができます。

$('#list-of-items li').on('mouseover', function() {      
   $('div:gt(0)').hide().eq($(this).index()).show();
});​
于 2012-05-30T16:59:00.387 に答える
0 
<head>
<script type="text/javascript">
$("#list-of-items ul > li").hover(function() {
  $("#" + this.id.replace("item", "content")).toggle();
});
</script>
</head>


<div id="list-of-items">
<ul>
    <li id="item1">item1</li>
    <li id="item2">item2</li>
    <li id="item3">item3</li>
    <li id="item...">19-more-items</li>
</ul>
</div>

<div id="content1">content1</div>
<div id="content2">content2</div>
<div id="content3">content3</div>
<div id="content...">...</div>
于 2012-05-30T21:58:31.237 に答える
0

JQueryメソッドは、対応するブロックhoverを表示および非表示にします。div

$("#list-of-items ul > li").hover(function() {
    $("#" + this.id.replace("item", "content")).toggle();
});

デモ : http://jsfiddle.net/LzkKM/

于 2012-05-30T17:01:05.283 に答える
0 
$('#list-of-items li').on('mouseenter mouseleave', function(e) {
    $('#content'+this.id.replace('item', ''))[e.type==='mouseenter'?'show':'hide']();
})​;​

フィドル

編集

これがあなたが探しているものだと思います：

$(function(){
    $('#list-items li').on('mouseenter', function() {
        $('#content'+this.id.replace('item', '')).show().siblings().hide();
    });
});

フィドル

于 2012-05-30T17:08:53.850 に答える