Question

我想补充一些链接，但不是全部，

每个链接都不同

这是一个非工作代码的例子，

        <!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/找到了一个示例，但它只使用相同的网址加载了一个链接，看起来好像它会q页面上的所有“A”href我不希望它这样做它也会在鼠标悬停时触发我只想点击它，因为我不想在用户点击链接之前加载页面。

Answer 1

你可以给你想要qtip的标签，如：

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

希望这是你想要的：）

简单？？ onClick qTip一些链接，但不是全部

1 个答案: