Как разместить div по ссылке на клик?

Я пытаюсь сделать что-то похожее на этот сайт, когда вы наводите на себя образ пользователей в ответах. Поскольку я никогда не работал с CSS, я понятия не имею, как правильно это сделать. Мне дали CSS и дизайн. Данные будут загружены на сервер и отправлены на страницу с помощью jQuery.Как разместить div по ссылке на клик?

Моя проблема заключается в том, что ссылка может быть в любом месте на странице, но все они будут отображаться ниже друг друга с небольшими различиями в поле слева. Дива должен быть под этим всегда. Как я могу это сделать?

Это весь CSS, с которым я работаю. Вы можете скопировать и вставить его. Теперь все меняется. Это позиция позиционирования, которая заставила меня застрять.

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Title Less</title> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.prod-info').click(function() { 
     var data = 'id=5705'; 
     if(data) { 
      $.ajax({ 
       type:"GET", 
       url:"/products/info/", 
       data:data, 
       dataType:'json', 
       beforeSend:function(x){ 

       }, 
       success: function(x){ 

       }, 
       error: function(x){ 

       }, 
      }); 
     } 
     return false; 
    }); 
}); 
</script> 
<style type="text/css"> 
#prod-menu { 
    -moz-border-bottom-colors: none; 
    -moz-border-image: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    background-color: #505050; 
    border-color: #444444 #1C1C1C#1C1C1C; 
    border-radius: 4px 4px 4px 4px; 
    border-right: 1px solid #1C1C1C; 
    border-style: solid; 
    border-width: 1px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 0 #727272 inset; 
    color: #E3E3E3; 
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; 
    font-size: 11px; 
    line-height: 1.2; 
    padding: 10px; 
    position: relative; 
    text-align: left; 
    width: 300px; 
    z-index: 320; 

} 
#prod-menu .pm-gravatar { 
    float: left; 
    margin-right: 8px; 
} 
#prod-menu .pm-header-info .pm-prod-link, #prod-menu .pm-header-info .mod-flair { 
    color: #E2E2E2 !important; 
    font-size: 18px; 
} 
#prod-menu .pm-header-info .pm-flair .badgecount, #prod-menu .pm-header-info .pm-flair .reputation-score { 
    color: #E2E2E2; 
} 
#prod-menu .pm-about-me { 
    clear: both; 
    font-size: 11px; 
    margin: 5px 0; 
    overflow: hidden; 
} 
#prod-menu .pm-links a { 
    font-size: 11px; 
    margin-right: 8px; 
} 
#prod-menu a, #prod-menu a:visited { 
    color: #B4D4EC; 
    text-decoration: none; 
} 
#prod-menu a:hover { 
    color: #DCECF7; 
} 
</style> 
</head> 
<body> 

<div id="container"> 

<div class="prod-info">I am Link A</div> 
<div class="prod-info" style="margin-top:150px;margin-left:100px">I am Link B</div> 
<div class="prod-info" style="margin-top:300px;margin-left:200px">I am Link C</div> 

<div id="prod-menu"> 
I am the product info div! 
</div> 

</div> 

</body> 
</html>

источник

2013-10-04 jmenezes

Можете ли вы дать нам образ того, что вы хотите? Я немного смущен http://jsfiddle.net/VkaFv/ – Romain

Не успел написать что-то атм, но [событие click] (https://developer.mozilla.org/en-US/docs/Web/Reference/Events/click) на mdn, [смещение jQuery()] (http://api.jquery.com/offset/) и [ширина jQuery()] (http://api.jquery.com/ width /) и [jQuery height()] (http://api.jquery.com/height/) - это то, что вам нужно. – Sumurai8

@romain Это то же самое, что вы наводите на себя аватар на этой странице, и его профиль загружается в крошечный div. Я застрял в том, как получить div ниже каждой ссылки, когда каждая ссылка появляется в разных местах на странице. Скопируйте и вставьте мой код. – jmenezes

Вы можете добавить этот statments:

$('.prod-info').mouseenter(function() { 
    currTop = $(this).offset().top+20; 
    currLeft = $(this).offset().left; 
    $('#prod-menu').css({ 
     top: currTop + "px", 
     left: currLeft + "px", 
     display: "block" 
    }) 
}); 
$('.prod-info').mouseleave(function() { 
    currTop = $(this).offset().top; 
    currLeft = $(this).offset().left; 
    $('#prod-menu').css({ 
     display: "none" 
    }) 
});

И я также заменить position:relative на position:absolute.

Надеюсь, что эта помощь.

Проверить Fiddle

источник

2013-10-04 13:37:40 EdenSource

Работает хорошо. Я возьму его отсюда. Я обновил вашу скрипку. У вас есть орфографическая ошибка с мышами, мышь и мышь одинаковые :-) – jmenezes

Opps yep извините за ошибку – EdenSource

Действительно извините за это. Я обновил ответ и скрипку. – EdenSource

Как разместить div по ссылке на клик?

ответ

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