0
我有一個部分「menu-2」，其中有可點擊的圖像，點擊時點亮。我編寫了一個js腳本（第一個woo），添加一個「活動」類onclick，並從所有其他菜單項中刪除該類。我面臨的問題是，只有將腳本嵌入到「menu.htm」部分文件中的<script>標記中，腳本才能正常工作。我也有與CSS代碼相同的問題。Javascript和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>
菜單2.htm（局部的）
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>
我不確定錯誤可能是什麼。有任何想法嗎？