的div的onclick jQuery的

10

我建議增加一個隱藏的div：

<div id="message"> 
This is a message 
</div>

與CSS：

#message { position: absolute; display: none; }

然後顯示它：

$("#equipment").click(function(evt) { 
    $("#message").css({ 
    top: evt.pageY, 
    left: evt.pageX 
    }).toggle(); 
});

這裏有一個完整的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#equipment").click(function(evt) { 
    $("#message").css({ 
     top: evt.pageY + 5, 
     left: evt.pageX + 5 
    }).show(); 
    }); 
}); 
</script> 
<style type="text/css"> 
html, body, div { margin: 0; padding: 0; border: 0 none; } 
#wrapper { margin: 0 auto; width: 600px; } 
#equipment { color: green; } 
#message { display: none; position: absolute; text-align: center; padding: 10px; width: 120px; background: red; color: white; font-weight: bold; } 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <span id="equipment">incididunt ut labore et dolore</span> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<div id="message">This is a message</div> 
</div> 
</body> 
</html>

來源

2009-12-28 00:35:53 cletus

+0

什麼都沒有發生 – Rickstar 2009-12-28 01:03:04

+0

那麼這是一個100％的工作示例。「什麼都沒有發生」是什麼意思？ – cletus 2009-12-28 01:05:01

+0

所有作品greate。添加一些CSS和一些動畫可以得到很好的結果 – AEMLoviji 2012-08-10 13:30:26

1

單擊以設備直到你提供更詳細的信息，這裏是你的解決方案：

$("span#equipment").click(function(){ 
    $(".invisiDiv").show(); // .toggle() if you need it to close with next click 
});

-

<p><span id="equipment">Equipment</span></p> 
<div class="invisiDiv" style="display:none;"> 
    <p>This div will be shown once you click on the span element above</p> 
</div>

如果需要此.invisiDiv在任何時候你的鼠標靠近的話，你可以動態地根據重新定位：

$("span#equipment").click(function(e){ 
    $(".invisiDiv") 
    .css({top:e.pageX,left:e.pageY}) 
    .show(); // .toggle() if you need it to close with next click 
});

，並添加以下CSS規則吧：

.invisiDiv { position:absolute; width:100px; height:15px; }

來源

2009-12-28 00:32:27 Sampson

+0

什麼也沒有發生 – Rickstar 2009-12-28 00:49:59

+0

你是什麼意思，溝壑？ – Sampson 2009-12-28 00:51:22

2

另一種方式可以是這樣的

HTML：

<span>click!</span>

的Jquery：

$('span').click(function() 
{ 
    $(this).showDiv('<div>I AM DIV</div>'); 
}); 

//plugin 
jQuery.fn.showDiv = function (html) 
{ 
    var pos = $(this).position(); 
    $(html).insertAfter('span').css({ 
     position: "absolute", 
     top: (pos.top + 20) + "px",//customize top position 
     left: (pos.left) + "px"//customize left position 
    }).fadeIn(); 
    return this; 
}

一些CSS：

div{ 
    background:red; 
    display:none;height:50px;width:50px 
} 
span{ 
    position:absolute; 
    top:20px; 
    left:50px; 
    background:green; 
}

工作演示http://jsfiddle.net/a5Zxk/1/

來源

2013-05-20 07:08:31 h0mayun

的div的onclick jQuery的

回答

相關問題