現在2ページあります。私がやっていることは、ページ遷移を試みていて、以下のプラグインswupを使用していることです。今私の問題は、メニューをクリックしたときにページ遷移が機能しないことです。
/indexとのようなメニュー/aboutをhref
に追加しました。私のURLはhttp://localhost:8080/example/index、メニューをクリックすると取得object not foundされ、URLが表示されますhttp://localhost:8080/about
誰でもこの問題で私を助けることができますか?
header.php
<header>
<div>
<ul>
<li><a href="/index">Index</a></li>
<li><a href="/about">About</a></li>
</ul>
</div>
</header>
インデックス.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link href="assets/css/style.css">
</head>
<body>
<?php include('assets/include/header.php');?>
<div id="swup" class="transition-fade">
<h1>This is homepage</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
about.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Document</title>
<link href="assets/css/style.css">
</head>
<body>
<?php include('assets/include/header.php');?>
<div id="swup" class="transition-fade">
<h1>This is Aboutpage</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
スタイル.css
.transition-fade {
transition: 0.4s;
opacity: 1;
}
html.is-animating .transition-fade {
opacity: 0;
}
main.js
import Swup from 'swup';
const swup = new Swup();