Es gibt verschiedene Ansätze dazu, zum Beispiel JavaScript zu verwenden. In JavaScript, setzen Sie ein Wörterbuch auf, die die Seiten Titel in Ihrer Navigationsleiste enthält sowie eine numerische Seite ID
var pages = {
"Home": 1, "Work": 2, "About": 3, "Contact": 4
}
Da in der Regel wird ein Benutzer auf der Startseite beginnt, werden wir den Standardstrom eingestellt Seite „Home“ (dies könnte allerdings bei Bedarf angepasst werden):
//setting the default currentPage to "Home"
var currentPage = "Home";
Dann können Sie einen onClick/onTouchEnd Event-Listener zu jedem Link hinzufügen, die changePage(this.innerHTML) eine Funktion aufruft. this.innerHTML gibt den Namen der angeklickten Site zurück, z. "Arbeiten", wenn Sie auf den entsprechenden Link klicken.
function changePage(title) {
if(pages[title] > pages[currentPage]) {
//if the ID of the target page is higher than the current page's ID, it is at
//the right, thus it should animate in from the right side
transitionPage(title, "fromRight");
}
else if(pages[title] < pages[currentPage]) {
transitionPage(title, "fromLeft");
}
//set the currentPage to the page you just transitioned to
currentPage = title;
}
Sie können die „fromRight“/„fromLeft“ mit Boolesche Werte ersetzen, um es sauberer zu machen, aber zur besseren Lesbarkeit, ich habe es so. In der transitionPage(targetPage, direction) Funktion können Sie Ihren Code angeben, um den Übergang zu ermöglichen, aber ich werde das hier weglassen, da Sie anscheinend darauf konzentriert sind, wie Sie zwei verschiedene mögliche Aktionen erhalten, die demselben Link zugewiesen sind. Hoffe, ich könnte helfen!
By the way, die Links, die Sie technisch in Ihrem Navigations haben brauchen keine eigentlichen HTML-Ankerelemente (<a>), aber für die Benutzerfreundlichkeit zu sein, und diejenigen, die JS ausgeschaltet in ihrem Browser haben, ist es besser um auch tatsächlich funktionierende Links zu haben, und verwenden Sie die Methode preventDefault von JS, um zu verhindern, dass der Link eine neue Seite lädt.