Переключение DIV на парении

У меня есть список тестов UL, который идет как это:Переключение DIV на парении

<ul> 
<li id="firstdiv">First div</li> 
<li id="seconddiv">Second div</li> 
<li id="thirddiv">Third div</li> 
.... 
</ul>

И ржали, что у меня есть связанные DIV-х, он же:

<div id="firstdiv">Content Here</div> 
<div id="seconddiv">Content Here</div> 
<div id="thirddiv">Content Here</div>

мне было интересно, как я мог бы сделать каждый div показывает только когда его элемент LI зависает, возможно, с некоторым эффектом fadein. Я пробовал с некоторыми другими ответами отсюда, но не повезло: \

источник

2014-03-06 Mariola

'id's должен быть уникальным , Это важно. – George

Можете ли вы показать нам код javascript/jquery, который вы пробовали? – noobcode

Прочитайте документацию jQuery для событий мыши: http://api.jquery.com/category/events/mouse-events/ – francadaval

Как я уже говорил, важно, чтобы ваши id s были уникальными. Поэтому вам нужно найти другой способ ссылки на ваш <div>. Могу ли я предлагаю использовать data-* атрибуты:

HTML

<ul> 
    <li data-id="firstdiv">First div</li> 
    <li data-id="seconddiv">Second div</li> 
    <li data-id="thirddiv">Third div</li> 
</ul>

Тогда ваш Jquery может выглядеть следующим:

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

JSFiddle

источник

2014-03-06 13:23:06 George

Или используйте @Felix soultion, если вы не хотите эффекта затухания. – setec

Почему бы просто не использовать 'hover' и' fadeToggle' вместо: http://jsfiddle.net/X2trY/1/? – Felix

Это замечательно, но по умолчанию они открыты/показаны. Мне нужен только первый, который нужно открыть. Так что пользователь наводит курсор на какой-то другой элемент, и его отображается. Он перемещает курсор в сторону, снова появляется первый. – Mariola

Chang ваш идентификатор класса

<ul> 
<li class="firstdiv">First div</li> 
<li class="seconddiv">Second div</li> 
<li class="thirddiv">Third div</li> 
</ul> 

<div class="firstdiv">Content 1 Here</div> 
<div class="seconddiv">Content 2 Here</div> 
<div class="thirddiv">Content 3 Here</div>

, то вы можете использовать:

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

Fiddle Demo

источник

2014-03-06 13:23:37 Felix

Что делать, если эти элементы списка более одного класса? – George

Ну, это только пример? – Felix

Конечно, но просто мысль. Я не голосовал, не так ли? – George

Вы должны дать уникальные идентификаторы для элементов

<ul> 
<li id="firstdiv">First div</li> 
<li id="seconddiv">Second div</li> 
<li id="thirddiv">Third div</li> 

</ul> 

<div class="myclass" id="firstdiv1">Content1 Here</div> 
<div class="myclass" id="seconddiv1">Content2 Here</div> 
<div class="myclass" id="thirddiv1">Content3 Here</div> 

$(".myclass").hide(); 
$("ul li").hover(function(){ 
$(".myclass").hide(); 
$("#"+this.id+1).show(); 
});

Demo

источник

2014-03-06 13:24:37

Пожалуйста, смотрите this fiddle.

Также сохраняйте уникальный идентификатор.

Вот некоторый код из скрипки:

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

источник

2014-03-06 13:24:39

Попробуйте это.

HTML код

<ul> 
<li id="firstli">First div</li> 
<li id="secondli">Second div</li> 
<li id="thirdli">Third div</li> 
</ul> 

<div id="firstdiv">Content Here</div> 
<div id="seconddiv">Content Here</div> 
<div id="thirddiv">Content Here</div>

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(); 
    }); 
});

см Выход:fiddle demo

источник

2014-03-06 13:28:20

Это ваш ответ

<html> 
<head> 
<style> 
.hidden_div{ 
    display: none; 
    position: absolute; 
} 
</style> 
<script src="script/jquery-1.10.2.js"></script> 
<script> 
$(document).ready(function(){ 
    $("li").mouseover(function(){ 
     var id=$(this).attr('id'); 

     $('.hidden_div').fadeOut(); 
     $("."+id).fadeIn(); 
    }) 

}); 
</script> 
</head> 
<body> 
<ul> 
<li id="firstdiv">First div</li> 
<li id="seconddiv">Second div</li> 
<li id="thirddiv">Third div</li> 
</ul> 

<div class="firstdiv hidden_div">Content 1</div> 
<div class="seconddiv hidden_div">Content 2</div> 
<div class="thirddiv hidden_div">Content 3</div> 
</body> 
</html>

просто изменить расположение вашего сценария

источник

2014-03-06 13:29:29 M98

Могу ли я забрать мозг с чем-то другим? :) При тестировании это работает отлично, но когда я его развертываю, это не так: \ – Mariola

@ Mariola работает хорошо – M98

Переключение DIV на парении

ответ

Смежные вопросы