2

我有一个<ul>像下面这样的；

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

旁边我有一个包含另一个图像列表的 DIV。如下;

<ul>
  <li><img src="example1.png" alt="" /></li>
  <li><img src="example2.png" alt="" /></li>
  <li><img src="example3.png" alt="" /></li>
  <li><img src="example4.png" alt="" /></li>
</ul>

从技术上讲，我想做的是，当我将鼠标悬停<li>在第一个列表中时，它会显示<li>第二个列表中的正确内容。

我的猜测是计算<li>'s 的数量并获得当前悬停的数量。然后对第二个执行相同的操作<ul>并显示<li>相同的数字。

那可能吗？

4

3 回答 3

2

Hiya为你做了一个小秀和隐藏demo http://jsfiddle.net/KAJsF/

如果这有帮助，请告诉我，祝你愉快，干杯！

Jquery 代码 http://jsfiddle.net/KAJsF/

$(document).ready(function(){
    $("ul li").hover(function(){
        var showcalss = $(this).attr("class");
        $("."+showcalss+"img").show();
    });
       $("ul li").mouseout(function(){
        var showcalss = $(this).attr("class");
        $("."+showcalss+"img").hide();
    });
});​

html

<ul>
  <li class="1">Item 1</li>
  <li class="2">Item 2</li>
  <li class="3">Item 3</li>
  <li class="4">Item 4</li>
</ul>

<ul>
  <li style="display:none" class="1img"><img src="example1.png" alt="" />SHOW 1</li>
  <li style="display:none" class="2img"><img src="example2.png" alt="" />SHOW 2</li>
  <li style="display:none" class="3img"><img src="example3.png" alt="" />SHOW 3</li>
  <li style="display:none" class="4img"><img src="example4.png" alt="" />SHOW 4</li>
</ul>​
于 2012-04-17T10:58:24.450 回答
1

FIDDLED：http: //jsfiddle.net/GTM3X/1/

它并不花哨，但它可以满足您的需求。让我知道它是否有帮助。

编辑：在此处添加代码，以便于访问。

$('.one li').hover( function() {
    var x = $(this).index();
    $('.two li').hide().each( function(i, v) {
        if (i == x) {
            $(this).show();   
        }
    });
});​
于 2012-04-17T10:56:01.763 回答
0

请参阅此示例 http://jsfiddle.net/vtENY/3/ 代码是自我解释的 :)

无需更改 html 标记...LI 索引就足够了 :)

如果鼠标不在第一个列表中的任何 LI 上，我认为您可能想要隐藏第二个列表的所有 LI ......这段代码很有效。让我知道...

// hide all LI in the "two" UL
$("ul#two li").hide();

// listen for hover/unhover event
$("ul#one li").hover(function(){

    // find the index of the LI to be displayed
    var index = $(this).index();

    // show new active element
    $("ul#two li").eq(index).addClass("active").show();
},function(){
    // hide prev active element
    $("ul#two li.active").removeClass("active").hide();
})
于 2012-04-17T11:20:39.890 回答