Javascript 单击同一页面中的链接时如何重新加载页面?

我为移动导航应用了一个现成的插件，但我发现了一个问题。因为该网站是单页网站，并且导航中的链接通过使用哈希标签直接指向同一页面中的不同部分。

当我单击hamburger并选择其中一个链接时，它将转到该部分，但导航仍然存在！同时，我需要重新加载页面并在单击每个链接后转到该部分。或者，也许在单击链接时导航可能会自行关闭。

对不起，我不明白javascript，请教我如何修改代码，提前感谢！

(function() {

var Menu = (function() {
var burger = document.querySelector('.burger');
var menu = document.querySelector('.menu');
var menuList = document.querySelector('.menu__list');
var menuItems = document.querySelectorAll('.menu__item');

var active = false;

var toggleMenu = function() {
if (!active) {
menu.classList.add('menu--active');
menuList.classList.add('menu__list--active');
burger.classList.add('burger--close');
for (var i = 0, ii = menuItems.length; i < ii; i++) {
menuItems[i].classList.add('menu__item--active');
}

active = true;
} else {
menu.classList.remove('menu--active');
menuList.classList.remove('menu__list--active');
burger.classList.remove('burger--close');
for (var i = 0, ii = menuItems.length; i < ii; i++) {
menuItems[i].classList.remove('menu__item--active');
}

active = false;
}
};

var bindActions = function() {
burger.addEventListener('click', toggleMenu, false);
};

var init = function() {
bindActions();
};

return {
init: init
};

}());

Menu.init();

}());

.mobile_menu{display:block;}
.burger {position: absolute;z-index: 15;right: 25px;top: 25px;cursor: pointer;-webkit-transform: rotateY(0);transform: rotateY(0);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.burger__patty {width: 28px;height: 2px;margin: 0 0 4px 0;background: black;-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.burger__patty:last-child {margin-bottom: 0;}
.burger--close {-webkit-transform: rotate(180deg);transform: rotate(180deg);}
.burger--close .burger__patty:nth-child(1) {-webkit-transform: rotate(45deg) translate(4px, 4px);transform: rotate(45deg) translate(4px, 4px);}
.burger--close .burger__patty:nth-child(2) {opacity: 0;}
.burger--close .burger__patty:nth-child(3) {-webkit-transform: rotate(-45deg) translate(5px, -4px);transform: rotate(-45deg) translate(5px, -4px);}
.menu {position: fixed;top: 0;width: 100%;visibility: hidden;}
.menu--active {visibility: visible;}
.menu__list {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-flow: column wrap;-ms-flex-flow: column wrap;flex-flow: column wrap;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content:center;-ms-flex-pack: center;justify-content:center;float: left;width: 100%;height: 100vh;overflow: hidden;}
.menu__list {margin: 0;padding: 0;background:rgba(0, 0, 0, 0.5);list-style-type: none;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.menu__list--active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.menu__brand {background: #38C5B9;-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
.menu__brand--active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.menu__item {-webkit-transform: translate3d(500px, 0, 0);transform: translate3d(500px, 0, 0);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.menu__item--active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.menu__link {display: inline-block;position: relative;font-size: 25px;padding: 5px 0;font-weight: 300;color: white;text-decoration: none;color: white;-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.menu__lan{font-family: Helvetica, Arial, 'Noto Sans TC', 'LiHei Pro', 'Microsoft JhengHei', '微軟正黑體', '新細明體', sans-serif;}
.menu__link:before {content: "";position: absolute;bottom: 0;left: 50%;height: 2px;background: white;-webkit-transform: translateX(-50%);transform: translateX(-50%);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.menu__en:before {content: "";position: absolute; bottom: 0;left: 50%;width: 30px;height: 2px;background: white;-webkit-transform: translateX(-50%);transform: translateX(-50%);-webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);}
.menu__link:hover:before {width: 100%;}
.menu__link:hover{ color:#FFF;}
.menu .menu__item:nth-child(1) {-webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
.menu .menu__item:nth-child(2) {-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.menu .menu__item:nth-child(3) {-webkit-transition-delay: 0.3s;transition-delay: 0.3s;}
.menu .menu__item:nth-child(4) {-webkit-transition-delay: 0.4s;transition-delay: 0.4s;}
.menu .menu__item:nth-child(5) {-webkit-transition-delay: 0.5s;transition-delay: 0.5s;}
.menu .menu__item:nth-child(6) {-webkit-transition-delay: 0.6s;transition-delay: 0.6s;}
.desktop_menu{ float:right; margin-right:280px; margin-top:25px;}
.desktop_menu ul li{ float:left; list-style:none; font-size:16px; margin-right:25px; font-weight:400; text-transform:uppercase; }
.desktop_menu ul li a{color:#000;}
.desktop_menu ul li a:hover, .desktop_menu ul li a.active{color:#000;}
.header.menu_change { background-color:#000; background: rgba(0,0,0,0.8); height:100px;}
.header.menu_change_mobile {background: rgba(0,0,0,0.8); height:70px;}
.header.menu_change .desktop_menu ul li a{color:#fff;}
.header.menu_change .desktop_menu ul li a:hover, .header.menu_change .desktop_menu ul li a.active{color:#fff;}
.title{ color:#cf6b22; font-size:40px; padding-bottom: 1000px;}

<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
<title>test</title>

<!-- meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, maximum-scale=1">

<!-- css -->
<link rel="stylesheet" href="css/circlestar.css">
</head>

<body>
<!-- Header --> 
<header class="header">
<div class="mobile_menu">
<div class="burger">
<div class="burger__patty"></div>
<div class="burger__patty"></div>
<div class="burger__patty"></div>
</div>
<nav class="menu">
<ul class="menu__list">
<li class="menu__item"><a href="#hash1" class="menu__link">HASH1</a></li>
<li class="menu__item"><a href="#hash2" class="menu__link">HASH2</a></li>
<li class="menu__item"><a href="#hash3" class="menu__link">HASH3</a></li>
</ul>
</nav>
</div>
</header>

<a name="hash1"></a>
<div class="title">HASH1</div>
<a name="hash2"></a> 
<div class="title">HASH2</div>     
<a name="hash3"></a>
<div class="title">HASH3</div>
<!-- JS for general --> 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/circlestar.js"></script>
</body>
</html>

您只需要在menuList上添加一个单击处理程序。您可以在指定单击处理程序的位置下执行此操作burger。

burger.addEventListener('click', toggleMenu, false);
menuList.addEventListener('click', toggleMenu, false);

JSFiddle

作为旁注，请在您的问题中仅包含相关代码，并在需要时将完整代码作为单独的小提琴发布。

相关内容

最新更新

热门标签：