我需要创建一个带有有效导航栏链接的网页。唯一需要工作的链接是我的主页链接和我的博客链接，但是单击主页链接时，它不会返回到创建所有内容的索引文件。
我已经尝试在home.js中链接index.html文件，但是它仍然像home.js是它自己的页面一样工作]
我还认为问题可能出在我的routeFw.js文件中？
index.html：
<!DOCTYPE html>
<html>
<head>
<!-- Use this type of comment within HTML -->
<title>Find Your Travel Buddy</title>
<link href="style/commonStyle.css" rel="stylesheet" type="text/css" />
<link href="style/lightTitleStyle.css" rel="stylesheet" type="text/css" />
<style>
.callOut {
margin:5ex;
padding: 0.25ex 1ex; /* first number is top/botom, then left/right */
background-color: #ccb4b5;
border-radius: 8px;
}
</style>
</head>
<body>
<div id="titleNav">
<div id="pageTitle">
Find Your Travel Buddy!
</div>
<div id="nav">
<div class="dropdown">
<a href="#/home"><img title="Home" src="icons/light/home_icon_H24.png" alt="Home"></a>
</div>
<div class="dropdown">
<img class="dropHeader" title="Account" onclick="myDropdown.toggle(this)" src="icons/light/account_dd_icon_H24.png" alt="Account" >
<div class="dropContent" id="accountDropDown">
<a>Register</a> <br/>
<a>Log In</a> <br/>
<a>Profile</a> <br/>
<a>Log Out</a>
</div>
</div>
<div class="dropdown">
<img class="dropHeader" title="Search" onclick="myDropdown.toggle(this)" src="icons/light/search_dd_icon_H24.png" alt="Search" >
<div class="dropContent" id="searchDropDown">
<a href="#/users">Users</a> <br/>
<a href="#/cars">Cars</a>
</div>
</div>
<div class="dropdown">
<img class="dropHeader" title="Tutorial" onclick="myDropdown.toggle(this)" src="icons/light/tutorial_dd_icon_H24.png" alt="Account" >
<div class="dropContent" id="tutorialDropDown">
<a>Proposal</a> <br/>
<a>Demo</a> <br/>
<a>Log</a> <br/>
</div>
</div>
<div class="dropdown">
<a href="#/blog"><img title="Blog" src="icons/light/blog_icon_H24.png" alt="Blog"></a>
</div>
</div>
</div> <!-- end of titleNav (keep track of nesting) -->
<div id="content">
<div class="callOut">
<h2 align="center">
Planning a trip?
</h2>
<p align="center">
Want to enjoy your time and share your memories
with someone? Your travel buddy is just one click away!
</p>
<p align="center">
We our now offering a <strong>one week</strong>
all exclusive trip to one of our selected locations. First-time
users get a 20% off discount!!!
</p>
<h5 align="center">
<a href='https://www.wellsfargo.com/go-far-rewards/'>Wells Fargo</a>
users are eligible to redeem their rewards points with our services.
</h5> <!-- wells fargo becomes a link -->
</div>
<div class="row">
<div class='column column66'>
<strong>Never been to Italy?</strong> Seeing some of the world's
most famous sights certainly tops everyone's list when traveling
in Italy. But taking part in an activity or trying something new,
especially something you can share with locals, adds a special
dimension to a trip.
<br/>
<p>
With you travel buddy, you can:
<p><strong>Hike the Cinque Terre</strong></p>
<p><strong>Glide Through Venice in a Gondola</strong></p>
<p><strong>Tour Tuscan Hill Towns by Bicycle or Car</strong></p>
<p><strong>Make Perfect Pasta in Florence</strong></p>
<p><strong>Step Inside Ancient Rome</strong></p>
</p>
</div>
<div class='column column33'>
<img src='pics/italy.jpg' alt="Italy">
</div>
<div class='stopFloat'></div>
</div>
<div class="row">
<div class='column column33'>
<img src='pics/japan.jpg' alt='Japan'>
</div>
<div class='column column66'>
<strong>日本に来て (Come to Japan!) </strong>Japan is known
worldwide for its traditional arts, including tea ceremonies,
calligraphy and flower arranging. The country has a legacy of
distinctive gardens, sculpture and poetry. Japan is home to
more than a dozen UNESCO World Heritage sites and is the
birthplace of sushi, one of its most famous.
</div>
<div class='stopFloat'></div>
</div>
<div class="row">
<div class='column column66'>
<strong>What about Turkey?</strong> Turkey is noted for having one of the
three most famous and distinctive traditional cuisines in
the world. The First Ecumenical Council was held in Iznik,
Turkey. Writing was first used by people in ancient Anatolia.
The first clay tablets in the ruins of Assyrian Karum
(Merchant Colony) date back to 1950 B.C.
</div>
<div class='column column33'>
<img src='pics/turkey.jpg' alt='Turkey'>
</div>
<div class='stopFloat'></div>
</div>
</div> <!-- content. [[Keep track of nesting]] -->
<div id="footer">
Nyla Rashied
</div>
<div id="view"></div>
<script src="js/dropdownFw.js"></script>
<script src="js/routeFw.js"></script>
<script src="js/components/blog.js"></script>
<script src="js/components/home.js"></script>
<script>
"use strict";
var myRoutes = [];
myRoutes['/'] = home; // home is a function stored in js/components/home.js
myRoutes['/home'] = home;
myRoutes['/blog'] = blog;
// routeFw returns a routing object that has private and public
// data members and methods.
// As input parameter, it takes an object with properties you can set
// or just accept whatever defaults are set by the framework.
var myRoutes = routeFw({
routeArray: myRoutes,
//startingPath: '/home',
contentId: "content"
});
// print the routes (check console.log)
myRoutes.printRoutes();
var myDropdown = dropDownFw({
dropContentStyle: "dropContent",
hiddenRight: "-500px"
});
</script>
</body>
home.js：
function home(id) {
var content = document.getElementById(id).innerHTML = content;
}
routeFw.js：
function routeFw(params) {
var fw = {}; // creating and adorning this object to be passed back to the HTML page.
var startingPath = params.startingPath || '/home';
var contentId = params.contentId || "view";
if (!params.routeArray || params.routeArray[0]) {
alert("parameter object must specify array 'routeArray' with at least one element");
return;
}
// Declare a (private) array to store our routes.
var routes = params.routeArray;
// private function that will be called whenever a link is clicked (or href changed)
function router() { // private function
console.log("location.hash (the link that was clicked) is " + location.hash);
// prints something like #/home
// remove leading # from string that holds the clicked link
var path = location.hash.slice(1) || '/';
console.log('path (with no #) is ' + path);
// prints something like /home
// Use the url like an index (JS associative array notation) to find
// the desired content and place it in the content area.
// document.getElementById("view").innerHTML = routes[url];
if (!routes[path]) {
document.getElementById(contentId).innerHTML = "Error: link '" + path +
"' was never added to the routing.";
} else {
// invoke the function that's specified by the ajaxFillId(routes[url], "view");
// pass the correct route object to that function (either staticContent or jsonContent)
routes[path](contentId); // invoke function routes[path], a JS funtion/component
}
}
fw.printRoutes = function () {
console.log("routes will be printed on the next line ");
console.log(routes);
};
// Listen on hash change (whenever a link is clicked or href changed)
// In other words, whenever a link is clicked, invoke function router.
window.addEventListener('hashchange', router);
// content for when page is first rendered.
window.location.hash = startingPath;
return fw;
}
我同意N'Bayrambermberyyev的观点，href中的“＃”符号似乎无济于事，通常“ /”是链接的开始部分。您是否要像在CSS中那样将其称为“ id”？
如果删除此“＃”不能解决您的问题，我会遇到的一个常见问题是确保您正确链接到您要引导用户的文件。它遵循您本地系统上的正确文件路径吗？
我希望这会为您提供帮助