Question

我有这个代码，其中有3个链接，但是当我点击链接时，在Firefox的页脚栏上显示链接，但不要打开链接。如果单击鼠标滚动，请打开页面。鼠标的sx按钮可以在其他站点或窗口上正常工作。

<head>
<link href="tooltip/documentation.css" rel="stylesheet" />
<link href="tooltip/jquery.toolbars.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Lustria" rel="stylesheet" type="text/css">
<!--[if gte IE 9]>
<style type="text/css">
            .gradient {
               filter: none !important;
            }

            .tool-container.tool-top {
                border-bottom: none;
            }

          </style>
<![endif]-->
<link href="tooltip/bootstrap.icons.css" rel="stylesheet">
<link href="tooltip/prettify.css" rel="stylesheet">
<link href="tooltip/sunburst.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="tooltip/prettify.js"></script>
<script src="tooltip/jquery.toolbar.js"></script>
<script type="text/javascript">
            jQuery(document).ready(function($) {

                // Define any icon actions before calling the toolbar
                $('.toolbar-icons a').on('click', function( event ) {
                    event.preventDefault();
                });
                 $('.settings-button').toolbar({content: '#user-options', position: 'bottom'});
                $('#normal-button').toolbar({content: '#user-options', position: 'top'});
                $('.normal-button-bottom').toolbar({content: '#user-options', position: 'bottom'});
                $('.normal-button-small').toolbar({content: '#user-options-small', position: 'top', hideOnClick: true});
                $('#button-left').toolbar({content: '#user-options', position: 'left'});
                $('#button-right').toolbar({content: '#user-options', position: 'right'});
                $('#link-toolbar').toolbar({content: '#user-options', position: 'top' });
            });
        </script>
</head>

</head>

<body onload="prettyPrint()">


<div id="normal-button-bottom" class="settings-button"> <img src="tooltip/icon-cog-small.png" /> </div>
<br><br>
<div id="normal-button-bottom" class="settings-button"> <img src="tooltip/icon-cog-small.png" /> </div>


<div id="user-options-small" class="toolbar-icons" style="display: none;">  
    <a href>
        <i class="icon-align-left"></i>
    </a>
    <a href>    
        <i class="icon-align-center"></i>
    </a>
    <a href>
        <i class="icon-align-right"></i>
    </a>
</div>
<div id="user-options" class="toolbar-icons" style="display: none;">
    <a href="http://google.it">
        <i class="icon-user"></i>
    </a>
    <a href="http://yahoo.it">
        <i class="icon-star"></i>
    </a>
    <a href="http://www.tiscali.it">
        <i class="icon-edit"></i>
    </a>
    <a href="#">
        <i class="icon-trash"></i>
    </a>
    <a href="#">
        <i class="icon-ban-circle"></i>
    </a>
</div>
</body>

</html>

如何链接工作？

由于

Answer 1

jQuery(document).ready(function ($) {
    // Define any icon actions before calling the toolbar
    $('.toolbar-icons a').on('click', function (event) {
        event.preventDefault();
    });
    $('.settings-button').toolbar({
        content: '#user-options',
        position: 'bottom',
    });
    $('.settings-button').on('toolbarItemClick', function (e, el) {
        if (el.href) window.location.href = el.href;
    });
});

改为使用

Jquery插件 - toolbar.js＆gt;链接不起作用

1 个答案: