添加/刪除類后無法加載頁面

Question

我在菜單上使用 jquery 添加類和刪除類時遇到了一些問題，問題是頁面無法加載...

這是我的 html：

<div class="menu-gila-container">
  <ul id="menu-gila" class="menu nav-menu">
    <li class="current-menu-item"><a href="home">HOME</a></li>
    <li><a href="html">HTML</a></li>
    <li><a href="css">CSS</a></li>
    <li><a href="php">PHP</a></li>
    <li><a href="mysql">MYSQL</a></li>
    <li><a href="gaze">GA TAU</a></li>
    <li><a href="gaze">GA TAU</a></li>
    <li><a href="diary">DIARE</a></li>
    <li><a href="ask">ASK ME</a></li>
    <li><a href="about">ABOUT</a></li>
  </ul>
</div>  

這是我的 javascript ：

<script>
$(document).ready(function() {
    $("ul.nav-menu li").click(function(e) {
        e.preventDefault();

        //Remove the active class
        $("ul.nav-menu li").removeClass("current-menu-item");

        //Add the active tab to the selected tab
        $(this).addClass("current-menu-item"); 
    }); 
}); 
</script>

請幫我

Answer 1

刪除這一行e.preventDefault(); 它停止

或者

$(document).ready(function () {
    $("ul.nav-menu li").click(function (e) {
        e.preventDefault();
        $("ul.nav-menu li").removeClass("current-menu-item"); //Remove the active class
        $(this).addClass("current-menu-item"); //Add the active tab to the selected tab
        window.location.href = $(this).attr('href')
    });
});

添加基於 URL 的活動導航類

例子

HTML

    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/clients/">Clients</a></li>
        <li><a href="/contact/">Contact Us</a></li>
    </ul>

腳本

$(function() {
  $('ul.nav-menu li a[href^="/' + location.pathname.split("/")[1] + '"]').prev().addClass('active');
});

Answer 2

嘗試這個：

$(document).ready(function() {
    $("ul.nav-menu li").click(function(e) {
        e.preventDefault();
        $(this).siblings('li').removeClass('current-menu-item');
        $(this).addClass('current-menu-item');
    }); 
}); 

演示在這里