在hover时切换div

我有一个测试UL列表，如下所示：

 
First div
 
Second div
 
Third div
 ....  

而且，吼叫我有相关的div，又名：

 
Content Here
 
Content Here
 
Content Here 

我想知道如果我的每个div只显示它的LI项目徘徊，可能有一些淡化效果。 我从这里尝试了其他一些答案，但没有运气：

Answer 1

正如我所提到的，重要的是你的id是独一无二的。 所以你需要找到另一种方法来引用你的

。 我可以建议使用data-*属性：

HTML

 
 
First div
 
Second div
 
Third div
  

然后你的jQuery看起来像下面这样：

 $('ul li').on({ 'mouseenter':function(){ $('#'+$(this).data('id')).fadeIn(); },'mouseleave':function(){ $('#'+$(this).data('id')).fadeOut(); } }); 

的jsfiddle

Answer 2

请看这个小提琴 。

同时保持ID的独特性。

这里有一些来自小提琴的代码：

 $(document).ready(function() { $('ul>li').hover(function(){ $('#d'+$(this).prop('id')).show(); }, function() { $('#d'+$(this).prop('id')).hide(); }); }); 

Answer 3

张你的同学上课

 
 
First div
 
Second div
 
Third div
 
 
Content 1 Here
 
Content 2 Here
 
Content 3 Here 

然后你可以使用：

 $('ul li').hover(function() { var cls = $(this).attr('class'); $('div.'+cls).toggle(); }) 

小提琴演示

Answer 4

试试这个。

HTML代码

 
 
First div
 
Second div
 
Third div
 
 
Content Here
 
Content Here
 
Content Here 

JavaScript的。

 $(document).ready(function(){ $("#firstdiv").hide(); $("#seconddiv").hide(); $("#thirddiv").hide(); $("#firstli").hover(function(){ $("#firstdiv").show(); }); $("#secondli").hover(function(){ $("#seconddiv").show(); }); $("#thirdli").hover(function(){ $("#thirddiv").show(); }); }); 

看输出： 小提琴演示

Answer 5

你应该给元素赋予唯一的id

 
 
First div
 
Second div
 
Third div
 
 
Content1 Here
 
Content2 Here
 
Content3 Here
 $(".myclass").hide(); $("ul li").hover(function(){ $(".myclass").hide(); $("#"+this.id+1).show(); }); 

演示

Answer 6

这是你的答案

        
 
First div
 
Second div
 
Third div
 
 
Content 1
 
Content 2
 
Content 3
   

只需更改脚本的位置即可