Javascript 简单？？单击qTip部分链接，但不是全部链接
我想qtip一些链接，但不是全部 每个环节都是不同的 这是一个非工作代码的示例Javascript 简单？？单击qTip部分链接，但不是全部链接,javascript,jquery,ajax,qtip,qtip2,Javascript,Jquery,Ajax,Qtip,Qtip2,我想qtip一些链接，但不是全部 每个环节都是不同的 这是一个非工作代码的示例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>qTip2 - My test case - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="/css/result-light.css"/>
<script type='text/javascript' src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css"/>
<style type='text/css'>
body{
padding: 50px;
}
.qtip-wiki{
max-width: 385px;
}
.qtip-wiki p{
margin: 0 0 6px;
}
.qtip-wiki h1{
font-size: 20px;
line-height: 1.1;
margin: 0 0 5px;
}
.qtip-wiki img{
float: left;
margin: 10px 10px 10px 0;
}
.qtip-wiki .info{
overflow: hidden;
}
.qtip-wiki p.note{
font-weight: 700;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').each(function() {
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: 'http://qtip2.com/demos/data/snowyowl',
loading: false
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki'
});
});
});
});//]]>
</script>
</head>
<body>
<a href='non_QTip_Link.php' target='_blank'>Snowy Owl 0</a>
<br><br>
<a href='qtip_link_Yes1.php' onclick=$qTIPThisLink>Snowy Owl 1</a>
<a href='non_QTip_Link.php'>Snowy Owl 00</a>
<br><br>
<a href='qtip_link_Yes2.php' onclick=$qTIPThisLink>Snowy Owl 2</a>
</body>
</html>
qTip2-我的测试用例-JSFIDLE演示
身体{
填充：50px；
}
.qtip维基{
最大宽度：385px；
}
.qtip-wiki-p{
边际：0.06像素；
}
.qtip wiki h1{
字体大小：20px；
线高：1.1；
利润率：0.05倍；
}
.qtip wiki img{
浮动：左；
保证金：10px 10px 10px 0；
}
.qtip wiki.info{
溢出：隐藏；
}
.qtip wiki p.note{
字号：700；
}
//
url:'http://qtip2.com/demos/data/snowyowl“，我在上找到了一个示例，但它只使用相同的URL加载一个链接，看起来好像它会qTip页面上的所有“a”href。我不希望它这样做，它也会在鼠标上启动，我希望它只单击一次，因为在用户单击链接之前，我不想加载页面。您可以给a标签，让它具有qTip a类，如：
<a href='....' class='qtip-link'> LINK </a>
<script type='text/javascript'>
$(document).ready(function() {
$('.qtip-link').each(function() {
$(this).click(function() {
return false; //disables the the link from redirecting
});
var linkUrl = $(this).attr("href"); //gets the url from the link
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: linkUrl,
loading: false
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki',
show: 'click' //this will let the qtip only show when the link is clicked
});
});
});
});
</script>
$（文档）.ready（函数（）{
$（'.qtip link'）。每个（函数（）{
$（此）。单击（函数（）{
return false；//禁止链接重定向
});
var linkUrl=$（this）.attr（“href”）；//从链接获取url
$（此）.qtip({
内容：{
文本：“正在加载…”，
阿贾克斯：{
url:linkUrl，
加载：错误
}
},
职位：{
视口：$（窗口）
},
样式：“qtip wiki”，
show:'click'//这将使qtip仅在单击链接时显示
});
});
});
});
希望这就是你想要的：）努力理解你的问题。那么你想在点击链接时显示Qtip吗？@JeandrePentz我想要两者，在示例中：我想要第一个链接：“Snowy Owl 0”在新页面中打开，在其他两个链接中我想要使用Qtip。