0

我有一个物品清单。根据我悬停的项目，我只想显示一个具有相关内容的 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

我会用 .content-block 之类的东西对你所有的内容 div 进行分类

<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()绑定 mouseover 事件.not( )排除div包含lis 和.prop()来获取id当前元素的属性。

如果您将 a 添加class到 content divs 中，则可以替换('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

JQueryhover方法都将显示和隐藏相应的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 回答
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 回答