Javascript和CSS没有从资产管理器加载到部分

Question

我有一个部分＆＃34;菜单-2＆＃34;其中有可点击的图像，点击它们时点亮。我写了一个js脚本（第一个曾经用过）来添加一个＆＃34; active＆＃34; class onclick，并从所有其他菜单项中删除该类。我面临的问题是，只有将脚本嵌入＆＃34; menu.htm＆＃34;中的<script>标签内，该脚本才有效。部分文件。我也有与css代码相同的问题。

我到目前为止已经尝试了

1）为仅部分

创建新的布局文件

2）使用以下方法将javascript文件直接注入partial.htm：

function onStart()
{
    $this->addJs('assets/javascript/menu-selection.js');
}

3）将部分的整个代码粘贴到我调用它的页面中。这仅在我粘贴了javascript代码时才有效。

以下是相关文件：

home.htm

    title = "Home"
url = "/"
layout = "default"
description = "Home"

==





<!--Waves
<canvas id="gradient"></canvas>
<script src="{{ 'assets/javascript/waves.js'|theme }}"></script>

-->

<!--ParticleJS-->
<div id="particles-js" ></div>

  <!--Video Background-->
    <video loop muted autoplay playsinline poster="{{ 'assets/images/vid-bg-placeholder.tif'|theme }}">
        <source src="{{ 'assets/vid/vid-bg-dark.mp4'|theme }}" type="video/mp4">
    </video>

<!--Social Media tags-->
<div id="social-links">
      <img class="social-link" src="{{ 'assets/images/social-icons/instagram.png'| theme }}"/>
      <img class="social-link" src="{{ 'assets/images/social-icons/soundcloud.png'| theme }}"/>
      <img class="social-link" src="{{ 'assets/images/social-icons/facebook.png'| theme }}"/>
      <img class="social-link" src="{{ 'assets/images/social-icons/snapchat.png'| theme }}"/>
      <img class="social-link" src="{{ 'assets/images/social-icons/twitter.png'| theme }}"/>
      <img class="social-link" src="{{ 'assets/images/social-icons/youtube.png'| theme }}"/>

</div>

<!--Homescreen-->
<div id="home">
   {% partial "homepage" %}
</div>

<!--menu v2-->
<div id="menu-2">
   {% partial "menu-2" %}
</div>


<script>
//check what type of animation depending on which menu item is chosen





//Particle js settings
particlesJS("particles-js",

 {
  "particles": {
    "number": {
      "value": 140,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.2,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 9.589796456570207,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 142.0488174435947,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": .78,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": true,
        "rotateX": 1815.0682228903763,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "bubble"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 3.99574852357092,
        "duration": 0.7991497047141839,
        "opacity": 0.5114558110170777,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true

});
</script>

menu-2.htm（partial）

layout = "menu"
==
function onInit()
{
$this->addJs('assets/javascript/menu-selection.js');
}
==

<div class="menu-2" onload="default_active()">

    <!--Home Icon-->
    <div class="row" >
        <img class="menu-item-2 shadowfilter" id="home-icon"  src="{{ 'assets/images/menu/home-3.png'| theme }}"/>
    </div>
    <div class="row" >
        <img class="menu-item-2 shadowfilter" id="my-story"  src="{{ 'assets/images/menu/story-2.png'| theme }}"/>
    </div>
    <div class="row" >
        <img class="menu-item-2 shadowfilter" id="soundcloud" src="{{ 'assets/images/menu/music-2.png'| theme }}"/>
    </div>
    <div class="row" >
        <img class="menu-item-2 shadowfilter" id="store"  src="{{ 'assets/images/menu/store-2.png'| theme }}"/>
    </div>

</div>

<!--
<script>

//collect id from clicked menu item
$('img').click(function(){
   set_active(this.id);
}); //try that :-)

//set correct selecting on menu items
function set_active(new_active_id){

    //get class for home-icon
    var home = document.getElementById('home-icon');
    //get class for my-story
    var story = document.getElementById('my-story');
    //get class for soundcloud
    var soundcloud = document.getElementById('soundcloud');
    //get class for store
    var store = document.getElementById('store');

    //if element has already been selected
    if(document.getElementById(new_active_id).classList.contains("active")){

    }
    else{
        //set settings if not already selected
        switch(new_active_id){
            case 'home-icon':
                add_active(home);
                remove_active(story);
                remove_active(soundcloud);
                remove_active(store);
                break;
            case 'my-story':
                add_active(story);
                remove_active(home);
                remove_active(soundcloud);
                remove_active(store);
                break;
            case 'soundcloud':
                add_active(soundcloud);
                remove_active(story);
                remove_active(home);
                remove_active(store);
                break;
            case 'store':
                add_active(store);
                remove_active(story);
                remove_active(soundcloud);
                remove_active(home);
                break;
            default:
                add_active(home);
        }
    }
}

//add active class
function add_active(item){
    item.classList.add("active");
}

//remove active class
function remove_active(item){
    if(item.classList.contains("active"))
    {
        item.classList.remove("active");
    }
}
</script>
-->


<style>
.menu-2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 30vh;
    margin-left:30px;
}


.menu-item-2{
    height:70px;
    width:150px;
    opacity:.6;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;

}

.menu-header{
    margin-left:37px;
    height:100px;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}


.menu-item-2:hover{
    opacity:1;
}

.active{
    opacity:1;
}

.shadowfilter {
    -webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;

}.shadowfilter#my-story:hover {
    -webkit-filter: drop-shadow(0px 0px 8px rgba(0, 231, 255, 0.8));
}

.shadowfilter#home-icon:hover {
    -webkit-filter: drop-shadow(0px 0px 8px rgba(201, 133, 185, 0.8));
}

.shadowfilter#soundcloud:hover {
    -webkit-filter: drop-shadow(0px 0px 8px rgba(251, 173, 24, 0.8));
}

.shadowfilter#store:hover {
    -webkit-filter: drop-shadow(0px 0px 8px rgba(0, 255, 30, 0.8));
}

</style>

的default.htm

<!doctype html>
<html>
<head>  
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="{{ this.page.meta_description }}">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <link rel="shortcut icon" type="image/png" href="{{ 'assets/favicon.png'|theme }}">

    <script src="{{ 'assets/javascript/jquery-2.1.0.min.js'|theme }}"></script>
    <script src="{{ 'assets/javascript/bootstrap.min.js'|theme }}"></script>
    <script src="{{ 'assets/javascript/blocs.min.js'|theme }}"></script>
    <script src="{{ 'assets/javascript/particles.js'|theme }}"></script>
    <!--page transitions-->
    <script src="{{ 'assets/javascript/pagetransitions.js'|theme }}"></script>
    <script src="{{ 'assets/javascript/modernizr.custom.js'|theme }}"></script>
    <!--menu selection-->
    <script src="{{ 'assets/javascript/menu-selection.js'|theme }}"></script>

    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/bootstrap.min.css'|theme }}">
    <link rel="stylesheet" type="text/css" href="{{ 'assets/style.css'|theme }}">
    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/font-awesome.min.css'|theme }}">
    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/css.css'|theme }}">

    <!--page transitions-->
    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/pagetransitions/animations.css'|theme }}">
    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/pagetransitions/component.css'|theme }}">



    <title>{{ this.page.title }}</title>


<!-- Google Analytics -->

<!-- Google Analytics END -->

</head>
<body style="height:100vh;overflow:hidden!important">
<!-- Main container -->

     {% page %}

<!-- Main container END -->
    {% framework extra %}
    {% framework %}
    {% scripts %}
    {%styles%}
</body>
</html>

我不确定错误是什么。有什么想法吗？

Answer 1

我解决了这个问题。有两个主要问题

1）我的默认布局设置为＆＃34; menu＆＃34;布局而不是＆＃34;默认＆＃34;

2）我有onInit()而不是onStart()。

以下是我错误的代码：

menu-2.htm（partial）

layout = "menu"
==
function onInit()
{
$this->addJs('assets/javascript/menu-selection.js');
}
==

以下是更新的default.htm和menu-2.htm：

<强>的default.htm

<!doctype html>
<html>
<head>  
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="{{ this.page.meta_description }}">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <link rel="shortcut icon" type="image/png" href="{{ 'assets/favicon.png'|theme }}">

    <script src="{{ 'assets/javascript/jquery-2.1.0.min.js'|theme }}"></script>
    <script src="{{ 'assets/javascript/bootstrap.min.js'|theme }}"></script>
    <script src="{{ 'assets/javascript/blocs.min.js'|theme }}"></script>
    <script src="{{ 'assets/javascript/particles.js'|theme }}"></script>
    <!--page transitions-->
    <script src="{{ 'assets/javascript/pagetransitions.js'|theme }}"></script>
    <script src="{{ 'assets/javascript/modernizr.custom.js'|theme }}"></script>
    <!--menu selection-->
    <script src="{{ 'assets/javascript/menu-selection.js'|theme }}"></script>

    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/bootstrap.min.css'|theme }}">
    <link rel="stylesheet" type="text/css" href="{{ 'assets/style.css'|theme }}">
    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/font-awesome.min.css'|theme }}">
    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/css.css'|theme }}">

    <!--page transitions-->
    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/pagetransitions/animations.css'|theme }}">
    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/pagetransitions/component.css'|theme }}">

    {%styles%}

    <title>{{ this.page.title }}</title>

</head>
<body style="height:100vh;overflow:hidden!important">

<!-- Main container -->

     {% page %}

<!-- Main container END -->

{% framework extra %}
    {% framework %}
    {% scripts %}
</body>
</html>

菜单-2.htm

==
function onStart()
{
    $this->addCss('assets/css/menu.css');
    $this->addJs('assets/javascript/menuselection.js');
}
==
<div class="menu-2" onload="default_active()">

    <!--Home Icon-->
    <div class="row" >
        <img class="menu-item-2 shadowfilter" id="home-icon"  src="{{ 'assets/images/menu/home-3.png'| theme }}"/>
    </div>
    <div class="row" >
        <img class="menu-item-2 shadowfilter" id="my-story"  src="{{ 'assets/images/menu/story-2.png'| theme }}"/>
    </div>
    <div class="row" >
        <img class="menu-item-2 shadowfilter" id="soundcloud" src="{{ 'assets/images/menu/music-2.png'| theme }}"/>
    </div>
    <div class="row" >
        <img class="menu-item-2 shadowfilter" id="store"  src="{{ 'assets/images/menu/store-2.png'| theme }}"/>
    </div>

</div>