个人中心
gpt4 book ai didi

javascript - 如果 URL 不是 home/root，Javascript 代码将无法工作

转载 作者：太空宇宙 更新时间：2023-11-04 16:08:18 25 4
gpt4 key购买 nike

我有一个顶部导航栏的java脚本代码。该代码仅在我位于网站的根目录(主页)时才有效。例如，如果您单击右上角的加号图标，您将进入另一个页面，然后菜单停止工作。我现在 JS 不太擅长，我不明白为什么。我猜测这可能是由于当 url 不同时某些元素未加载，但我无法修复它。我将发布 CSS 和 html 代码以查看脚本的放置位置。关于 html 文件正文中的脚本的一个事实是，我无法将其移动到正文之外，因为菜单再次停止工作。我认为原因是相同的，但我无法解决它。

请给我一个编辑过的代码，因为在另一个问题中人们给了我想法，而我尝试了所有这些但没有一个起作用。这只是为了确保任何答案都是有效的答案，而不仅仅是一种预感。谢谢!

以下是已部署网站的链接，您可以使用它进行试验和错误:

http://ejeddi.pythonanywhere.com/

js:

var cbpHorizontalMenu =(function() {
    var b = $("#cbp-hrmenu > ul > li"),
        g = b.children("a"),
        c = $("body"),
        d = -1;

    function f() {
        g.on('click', a);
        b.on('click', function(h) {
            h.stopPropagation()
        })

    }

    function a(j) {
        if (d !== -1) {
            b.eq(d).removeClass("cbp-hropen")
        }
        var i = $(j.currentTarget).parent("li"),
            h = i.index();
        if (d === h) {
            i.removeClass("cbp-hropen");
            d = -1
        } else {
            i.addClass("cbp-hropen");
            $("cbp-hropen");
            d = h;
            c.off('click').on('click', e)
        }
        return false
    }

    function e(h) {
        b.eq(d).removeClass("cbp-hropen");
        d = -1
    }
    return {
        init: f
    }
})();

基本 html:

    {% load staticfiles %}

    <!DOCTYPE html>

    <html lang="en" class="no-js">
        <head>
            {% block meta_tags %}{% endblock meta_tags%}

            <title>
                {% block title %}BPM App{% endblock title %} 
            </title>

            {% block stylesheets %}
                <link type="text/javascript" href="{% static 'bpmapp/js/topnavbar.js' %}">
                <link rel="shortcut icon" type="image/png" href="{{STATIC_URL}}/favicon.ico"/>
            {% endblock %}

            {% block javascript %}
                <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

                <script>
                    $(function() {
                        cbpHorizontalMenu.init();
                    });
                </script>
            {% endblock javascript %}

            {% block extra_head %}{% endblock %}
        </head>

        <body>
            <header class="navbar topnavbar">
                {% include 'bpmapp/_topnavbar.html' %}
            </header>

            <div id="main" role="main">
                <div class="container">
                    {% block content %}
                    {% endblock content %}
                </div>
            </div> {# /#main #}

            <script type='text/javascript' src="static/bpmapp/js/cbpHorizontalMenu.min.js"></script>

        </body>
    </html>

顶部导航栏 html

{% load static %}
{% load staticfiles %}


        <head>
            <link rel="stylesheet" type="text/css" href="{% static 'bpmapp/css/topnav-default.css' %}">
            <link rel="stylesheet" type="text/css" href="{% static 'bpmapp/css/topnav-component.css' %}">

            <!-- used for icons in navbar -->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        </head>

        <div class="container">
            <header class="clearfix">
                <!--<span>Tagline</span>-->
                <a href="/"><i class="fa fa-home fa-2x" id="icon-home"> </i></a>
                <nav>
                <a href="/process_new/"> <i class="fa fa-plus fa-2x" id="icon-new-process" data-info="New Process"></i> </a>
                    <!-- 
                    <a href="http://tympanus.net/Blueprints/FullWidthImageSlider/" class="icon-arrow-left" data-info="previous Step">Previous Blueprint</a>
                    <a href="http://tympanus.net/codrops/?p=14426" class="icon-drop" data-info="Next Step">back to the Codrops article</a>
                     -->
                </nav>
            </header>   

            <div class="nav-main">
                <nav id="cbp-hrmenu" class="cbp-hrmenu">
                    <ul>
                        <li>
                            <a href="#">Products</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Utilities</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Education</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Downloads</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner">
                                    <div>
                                        <h4>Education &amp; Learning</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Entertainment</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Holy Cannoli</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Applications</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                        </ul>
                                        <h4>Utilities</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Education</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Projects</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>

                                    </div>
                                    <div>
                                        <h4>Entertainment</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Holy Cannoli</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>

                    </ul>
                </nav>
            </div>

        </div>

顶部导航栏默认 CSS:

/* General Demo Style */

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
    font-family: 'fontawesome';
    src:url('../fonts/fontawesome.eot');
    src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
        url('../fonts/fontawesome.svg#fontawesome') format('svg'),
        url('../fonts/fontawesome.woff') format('woff'),
        url('../fonts/fontawesome.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, html { font-size: 100%; padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}


body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #47a3da;
}

a {
    color: #f0f0f0;
    text-decoration: none;
}

a:hover {
    color: yellow;
    transform: scale(1.2);
}

.container{
    padding-top:0px;
}


.container > header {
    width: 90%;
    max-width: 70em;
    margin: 0 auto; /* remove auto to push the h1 text to left*/
    padding: 0 0.5em 0.5em 0.5em;
}

/* Brand Name Text */
.container > header h1 {
    font-size: 1.5em;
    line-height: 1.3;
    margin: 0;
    float: left;
    font-weight: 400;
    margin-top:0;
}

.container > header span {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    padding: 0 0 0.1em 0.1em;
}

.container > header nav {
    float: right;
    text-align:bottom;
    padding-top:0.1em;
}

/* next previous icons*/
/*
.container > header nav a {
    display: block;
    float: left;
    position: relative;
    width: 2.5em;
    height: 2.5em;
    background: #fff;
    border-radius: 50%;
    color: transparent;
    margin: 0 0.5em;
    border: 4px solid #47a3da;
    text-indent: -8000px;
}
*/

/* after click next previous icons*/
.container > header nav a:after {
    content: attr(data-info);
    color: #47a3da;
    position: absolute;
    width: 600%;
    top: 120%;
    text-align: right;
    right: 0;
    opacity: 0;
    pointer-events: none;
}

.container > header nav a:hover:after {
    opacity: 1;
}
/* hover next previous icons*/
/*
.container > header nav a:hover {
    background: #47a3da;
}
*/

.icon-drop:before, 
.icon-arrow-left:before {
    font-family: 'fontawesome';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 2;
    text-align: center;
    color: #47a3da;
    -webkit-font-smoothing: antialiased;
    text-indent: 8000px;
    padding-left: 8px;
}

.container > header nav a:hover:before {
    color: #fff;
}

.icon-drop:before {
    content: "\e000";
}

.icon-arrow-left:before {
    content: "\f060";
}

.fa{
    color:#999;
    transition: all .2s ease-in-out;
}

.fa:hover{
    color: #47a3da;
    /*color:rgb(20,220,180); ----- green ----- */
    transform: scale(1.2);
}

topnavbar组件CSS:

/* menu separator */
.cbp-hrmenu {
    width: 100%;
    margin-top: 0em;
    border-bottom: 4px solid #47a3da;
}

/* general ul (div of tabs) */
.cbp-hrmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* first level ul style (div of tabs)*/
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
    width: 90%;
    max-width: 70em;
    margin: 0 auto; /*remove auto to push tabs to left*/
    padding: 0 1.875em;

}
/* tabs individually + the menu that drops*/
.cbp-hrmenu > ul > li {
    display: inline-block;
}

/* link (text) of tabs */
.cbp-hrmenu > ul > li > a {
    font-size:1.1em;
    font-weight: 700;
    padding: 0.1em 1em; /* height of tabs*/
    color: #999;
    display: inline-block;
    border-radius:0.5em 0.5em 0em 0em;
    transition: all .2s ease-in-out; 
}
/* hover tabs' text */
.cbp-hrmenu > ul > li > a:hover {
    /*color: #47a3da;
    transition: color 0.2s linear;*/
    color:#47a3da;
    transform: scale(1.2);
}

/* links inside the drop down menu */
.cbp-hrmenu > ul > li.cbp-hropen > a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
    color: white;
    background: #47a3da;
}

/* sub-menu (the one that drops and contains options)*/
.cbp-hrmenu .cbp-hrsub {
    display: none;
    position: absolute;
    background: #47a3da;
    width: 100%;
    left: 0;
}

.cbp-hropen .cbp-hrsub {
    display: block;
    padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
    width: 33%;
    float: left;
    padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
    content: " ";
    display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
    clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
    line-height: 2em;
    transition: all .2s ease-in-out;
}

.cbp-hrmenu .cbp-hrsub-inner > div a:hover {
    font-weight:bold;
    color:yellow;
}


.cbp-hrsub h4 {
    color: #afdefa;
    padding: 2em 0 0.6em;
    margin: 0;
    font-size: 160%;
    font-weight: 300;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) { 

    .cbp-hrmenu {
        font-size: 80%;
    }

}

@media screen and (max-width: 43em) { 

    .cbp-hrmenu {
        font-size: 120%;
        border: none;
    }

    .cbp-hrmenu > ul,
    .cbp-hrmenu .cbp-hrsub-inner {
        width: 100%;
        padding: 0;
    }

    .cbp-hrmenu .cbp-hrsub-inner {
        padding: 0 2em;
        font-size: 75%;
    }

    .cbp-hrmenu > ul > li {
        display: block;
        border-bottom: 4px solid #47a3da;
    }

    .cbp-hrmenu > ul > li > a { 
        display: block;
        padding: 1em 3em;
    }

    .cbp-hrmenu .cbp-hrsub { 
        position: relative;
    }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }

}

@media screen and (max-width: 36em) { 
    .cbp-hrmenu .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
}

最佳答案

这是我可以看到的代码中的主要问题:

您正在使用静态文件，因此它们位于网址:http://yourdomain.com/static ，但您正在尝试加载 http://yourdomain.com/process_new/static/

您可以通过两种方式修复它:

第一种方法是更改​​脚本标记中的 src 属性并在开头添加“/”。它将从根目录获取js文件:

<script type='text/javascript' src="/static/bpmapp/js/cbpHorizontalMenu.min.js"></script>

修复此问题的另一种方法是使用 Django 静态模板标记。它将为您创建静态文件的 url:

<script type='text/javascript' src="{% static 'bpmapp/js/cbpHorizontalMenu.min.js' %}"></script>

不要忘记在模板文件的开头添加此标签:

{% load staticfiles %}

关于javascript - 如果 URL 不是 home/root，Javascript 代码将无法工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41708127/

25 4 0
文章推荐： javascript - 如何在 Three.js 中从一系列 3D 点创建 3D 多边形？
文章推荐： php - 如何使 symfony 表单支持 datetime-local 输入类型？
文章推荐： c++ - 在C++中，(void)在参数中有什么作用？
文章推荐： javascript - 使用 js 表单验证器禁用 html 表单提交按钮
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com