jQuery脚本干扰导航链接_Jquery_Html_Django_Heroku_Jquery Cycle

jQuery脚本干扰导航链接

jquery html django heroku

jQuery脚本干扰导航链接,jquery,html,django,heroku,jquery-cycle,Jquery,Html,Django,Heroku,Jquery Cycle,我刚刚在Heroku上部署了一个Django应用程序- 我对页面顶部的永久链接有问题。当我从主页导航到任何页面时，导航链接都会失去响应。似乎有50%的情况发生。在Firefox中，导航在某些页面上完全消失。我很确定这是由于jQuery脚本造成的，因为当禁用时，链接正常工作。不过，我在本地没有看到任何这些问题，只是在部署的站点上我有一个基本HTML： {% load staticfiles %} <html> <head> <link rel="styles

我刚刚在Heroku上部署了一个Django应用程序-

我对页面顶部的永久链接有问题。当我从主页导航到任何页面时，导航链接都会失去响应。似乎有50%的情况发生。在Firefox中，导航在某些页面上完全消失。我很确定这是由于jQuery脚本造成的，因为当禁用时，链接正常工作。不过，我在本地没有看到任何这些问题，只是在部署的站点上

我有一个基本HTML：

{% load staticfiles %}
<html>
<head>
    <link rel="stylesheet" type="text/css" href="{% static 'main.css' %}"/>
    <link rel="shortcut icon" href="{% static 'logo.png' %}" type="image/png">
    <title>Hannah Young Photography</title>
</head>
<body>  
<div>
    <a href="/"><img class = "logo" src = "{% static 'logo.png' %}"/></a>
    <p class = "topnav-white-header">
        Hannah Harley Young is a party & event photographer based in London. She shoots mainly high profile events, but also commissioned for private parties as well as portrait
    </p>            
    <ul class = "navigation-bar">
        <li><a href="/contact" class = "nav-link">CONTACT</a></li>
        <li><a href="/clients" class = "nav-link">CLIENTS</a></li>
        <li><a href="/personal" class = "nav-link">PERSONAL</a></li>
        <li><a href="/fashion" class = "nav-link">FASHION</a></li>
        <li><a href="/portrait" class = "nav-link">PORTRAITS</a></li>
        <li><a href="/party" class = "nav-link">PARTIES</a></li>
    </ul>   
<div>       
{% block image %}
{% endblock %}
</div>      
</body> 
</html>

{%load staticfiles%}
汉娜·杨摄影

汉娜·哈雷·杨是一位总部位于伦敦的派对和活动摄影师。她主要拍摄高知名度的活动，但也受委托为私人聚会以及肖像拍摄









{%block image%}
{%endblock%}

画廊页面（派对、肖像、时尚、个人链接都具有相同的结构）如下所示：

{% extends "base.html" %}
{% load staticfiles %}
<html>
<head>
    <link rel="stylesheet" type="text/css" href="{% static 'main.css' %}"/>
</head>
<body>
{% block image %}   

<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type = "text/javascript" src = "{% static 'jquery.cycle.all.js' %}"></script>
<script type = "text/javascript">

$(document).ready(function(){
    $(".slideshow")
        .cycle({
        fx: 'scrollHorz',
        next: '.right-arrow',
        prev: '.left-arrow',
        timeout: 0,
        pager: '.slide-nav',
        pagerAnchorBuilder: function paginate(idx, el) {
                    return '<a class="bullet" href="#" >&bull;</a>'

        }
    })
})

$(document).ready(function(){
    $(".left-arrow").hover(function() {
        $(this).attr("src","{% static 'left-arrow-blue.png' %}");
        }, function() {
            $(this).attr("src","{% static 'left-arrow.png' %}");
        });
        }); 

$(document).ready(function(){   
    $(".right-arrow").hover(function() {
        $(this).attr("src","{% static 'right-arrow-blue.png' %}");
        }, function() {
            $(this).attr("src","{% static 'right-arrow.png' %}");
    });
    });

</script>

<img class = "right-arrow" src = "{% static 'right-arrow.png' %}">
<img class = "left-arrow" src = "{% static 'left-arrow.png' %}">

<div class = "slideshow">
    {% for photo in gallery %}
    <div class = "slide">
        <img class = "gallery-image" src ="{{ photo.image.url }}"/>
        <div class = "caption-container">
            {% for client in photo.client.all %}
            <div class = "client">client: {{ client.name }}
                <div class = "slide-nav"></div>
            </div>
            {% endfor %}    
            <span class = "caption">{{ photo.caption }}</span>
        </div>
    </div>
    {% endfor %}    
</div>  

{% endblock %} 
</body>
</html>

{%extends“base.html”%}
{%load staticfiles%}
{%block image%}
$（文档）.ready（函数（）{
$（“.slideshow”）
.自行车({
fx:‘滚动人’，
下一步：'.右箭头'，
上一页：'.左箭头'，
超时：0，
寻呼机：'.slide nav'，
pagerAnchorBuilder:函数分页（idx，el）{
返回“”
}
})
})
$（文档）.ready（函数（）{
$（“.left arrow”）.hover（函数（）{
$（this.attr（“src”，“{%static'左箭头蓝色.png%}”）；
}，函数（）{
$（this.attr（“src”，“{%static'left arrow.png%}”）；
});
}); 
$（文档）.ready（函数（）{
$（“.right arrow”）.hover（函数（）{
$（this.attr（“src”，“{%static'右箭头蓝色.png%}”）；
}，函数（）{
$（this.attr（“src”，“{%static'right arrow.png%}”）；
});
});
{%用于图库中的照片%}
{photo.client.all%中客户端的%
客户端：{{client.name}
{%endfor%}
{{photo.caption}
{%endfor%}
{%endblock%}

我想我发现了你的问题

这是您的css，在某些页面上，jquery脚本生成/使用的元素覆盖了导航，因此您无法单击或有时无法看到它们

你必须清理你的css，如果你读到最好的，那应该会帮助你解决你的问题。（使用firebug或chrome开发工具！）

以下是有关jQuery用法的更多提示：

将

$（document）.ready（function（）{}）

函数中的所有脚本合并到一个document.ready函数中

对于这些脚本中的功能，您甚至不需要document.ready

如果可能，请在页面底部包含这些脚本以获得更好的性能，document.ready会在DOM完成后加载。

我更新了我的答案，我想我发现了你的问题。@Sebsemillia谢谢，我正在研究，我会在稍后更新你。谢谢。你是对的，有一些元素覆盖了导航栏，但我不明白为什么会发生这种情况——该网站在本地运行良好。我熟悉Z指数。我给了导航栏一个10的索引，但这没有帮助。我将处理您提到的其他更改，但我认为它们不会解决问题。您的.slideshow div中的.slide具有css位置：relative，尝试将其设置为absoluteHey，我想我已通过在我的slideshow div上添加一些
标记来解决问题。它已将幻灯片向下推到导航栏下方。很高兴您成功，即使它不是最专业的解决方案。但是你应该检查你的源代码，有一些错误。例如，在你的时尚页面上，你有两次body标签。。用于标记错误检测。。