单击导航栏链接时jQuery对话框不起作用

Posted 2023-03-27

【中文标题】单击导航栏链接时jQuery对话框不起作用

【英文标题】：jQUery Dialog Box when Clicking Navigation Bar Link not Working

【发布时间】：2014-06-30 14:33:16

【问题描述】：

我正在尝试通过单击导航栏中的列表元素来设置 jQuery 对话框。单击画布元素时，我的代码适用于单独的项目，但不适用于此应用程序。我的代码如下：

导航栏列表中的可点击 div：

<nav id="nav_bar">
    <ul>
        <li><a class="fancypdf" href="img/resume.pdf">Resume</a></li>
        <li><a>Youtube</a></li>
        <li class="contact" style="cursor:pointer;">Contact</li>
    </ul>
</nav>

应该在对话框中显示的 Div：

<div class='dialog'>
    Hello
</div>

jQuery:

<script>
$(function()
    $(".contact").click(function(event)
        $(".dialog").dialog(
            width:490,
            height:500,
            draggable:false,
            blur:true,
            show:
                effect:"blind",
                duration:100
                ,
    hide: 
    effect: 'blind',
    duration: 100
    
        );
);
);
</script>

我的“进口”： http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js">    </script>

<script type="text/javascript" src="js/libs/fancybox-2.1.4/jquery.fancybox.pack.js">    </script>
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox-buttons.css">
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox-thumbs.css">
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox.css">

这是我所有的主要脚本标签：

<script>
$(".fancypdf").click(function()
$.fancybox(
type: 'html',
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0"    type="application/pdf"   />',
beforeClose: function() 
$(".fancybox-inner").unwrap();

); //fancybox
return false;
); //click
</script>


<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">  </script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-  1.7.1.min.js"><\/script>');</script>


<!-- FancyBox -->
<script src="js/fancybox/jquery.fancybox.js"></script>
<script src="js/fancybox/jquery.fancybox-buttons.js"></script>
<script src="js/fancybox/jquery.fancybox-thumbs.js"></script>
<script src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>

<script type="text/javascript">
$(document).ready(function() 
$('.fancybox').fancybox(
beforeShow : function()
this.title =  this.title + " - " + $(this.element).data("caption");

);
); // ready
</script>



<script type="text/javascript">
$(document).ready(function() 
$(".various").fancybox(
maxWidth    : 800,
maxHeight   : 600,
fitToView   : false,
width   : '70%',
height  : '70%',
autoSize    : false,
closeClick  : false,
openEffect  : 'elastic',
closeEffect : 'none',
beforeShow : function()
this.title =  $(this.element).data("caption");

);
);
</script>

<script>
var jquery = jQuery.noConflict();
jquery(function()
jquery(".contact").click(function(event)
console.log("clicked");
jquery(".dialog").dialog(
width:490,
height:500,
draggable:false,
blur:true,
show:
effect:"blind",
duration:100
,
hide: 
effect: 'blind',
duration: 100

    );
);
);
</script>

【问题讨论】：

你的代码工作正常..只要确保js加载正确..查看jsbin.com/pinifi/1/edit进行演示

我点击简历的链接，它会显示：“你的页面不在这里。”

我添加了我已经加载的内容。

您只为“联系人”链接而不是为简历链接绑定了点击事件，这就是为什么它会将您带到不同的页面

啊，我明白了，但它仍然不适合我，我将您的代码复制到一个单独的项目中，它也可以在那里工作。这不是我的电脑，你认为这可能是我加载的吗？加载fancybox 文件会影响我的jQuery 加载吗？

【参考方案1】：

您好像忘记包含 jQuery UI 或者 jQuery 和 jQuery UI 加载的顺序错误。

您的代码运行良好。

Tested in jsBin

只要确保所有 js 都正确包含：

<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>