易于理解的on单击q提示一些链接，但不是全部

我想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">
        <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>

我想替换：url: 'http://qtip2.com/demos/data/snowyowl',使用点击的URL并将其放置在此处，如果没有触发onclick，那么Qtip也不会触发。

我在http://jsfiddle.net/craga89/L6yq3/但它使用相同的URL只加载一个链接，看起来好像会qTip页面上的所有"A"href。我不希望它这样做，它还会在鼠标悬停时触发。我只希望它onclick，因为我不想在用户单击链接之前加载页面。

您可以给想要拥有qtip的a标签一个类，比如：

<a href='....' class='qtip-link'> LINK </a>

然后您可以添加以下javascript：

<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>

希望这是你想要的：）

相关内容

最新更新

热门标签：