Redirect to 'href ' and change active class of menu-CodePudding

I'm trying to change the active class of menu when I click on 'a' tag using jquery. I've searched a lot but none of them worked for me. when I click on a tag it redirects to 'href' attribute of the a tag and doesn't change the active menu.when I use 'e.preventDefult' it doesn't go to the 'href' but the active menu changes as I want. What should I do? This is the jquery I used:

<script>
$(document).ready(function(e) {
    $('.navigation-menu-body ul li a').click(function (e) {    
      
        $('.navigation-menu-body ul li a.active').removeClass('active');
        $(this).addClass('active');            
        $('.navigation-menu-body ul.navigation-active').removeClass('navigation-active');
        $(this).parent().parent().addClass('navigation-active');          
        $('.navigation-icon-menu ul li.navigation-active').removeClass('active');
        $('.navigation-icon-menu ul li').addClass('active');
        window.location.href = $(this).attr('href');
        console.log("href:", $(this).attr('href'));
        e.preventDefault();
    });
})

This is the html:

 <div class="navigation">
    <div class="navigation-icon-menu">
        <ul>
            <li data-toggle="tooltip" title="داشبورد">
                <a href="#navigationDashboards" title="داشبوردها">
                    <i class="icon ti-pie-chart"></i>
                </a>
            </li>
            <li data-toggle="tooltip" title="جشنواره های من">
                <a href="#festivals" title="جشنواره های من">
                    <i class="icon ti-package"></i>
                </a>
            </li>
            <li data-toggle="tooltip" title="کدهای جشنواره">
                <a href="#serialNumbers" title="کدهای جشنواره">
                    <i class="icon ti-layers"></i>
                </a>
            </li>
            <li data-toggle="tooltip" title="سوابق خرید">
                <a href="#invoices" title="سوابق خرید">
                    <i class="icon ti-agenda"></i>
                </a>
            </li>
        </ul>         
    </div>
    <div class="navigation-menu-body">
        <ul id="navigationDashboards" class="navigation-active">
            <li class="navigation-divider">داشبورد</li>
            <li>
                <a class="active" href="/dashboard/index">فروش و مدیریت مشتری</a>
            </li>
        </ul>
        <ul id="festivals">
            <li class="navigation-divider">جشنواره ها</li>
            <li>
                <a href="chat.html">جشنواره های من</a>
            </li>
        </ul>
        <ul id="serialNumbers">
            <li class="navigation-divider">کدهای جشنواره</li>
            <li><a href="/userSerialNumber/AssignSerialNumber">ثبت کد جدید </a></li>
            <li><a href="/userSerialNumber/UserScores">امتیازات من در هر اپلیکیشن </a></li>
        </ul>
        <ul id="invoices">
            <li class="navigation-divider">سوابق خرید</li>
            <li><a href="profile.html">خریدهای من </a></li>
        </ul>
    </div>
</div>

CodePudding user response：

When clicking on an anchor tag, you goes to a different page, so in order for you to add an active class check the URL against the hrefs on document.ready and then add the class if the argument matches.

$document.ready(function() {
  var url = window.location.pathname,
  urlRegExp = new RegExp(url.replace(/\/$/,''));
  $('.navigation-menu-body ul li a').each(function(){
        if(urlRegExp.test(this.href)){
          $(this).addClass('active');
        }
    });
});

CodePudding user response：

I don't know much about jQuery but you can do it pretty easy in vanilla js. First you specify an id for each li you got. then you need to check url so you can add active class for li tag of url you're currently in.for example:

<ul onload="checkUrl()">
            <li id="tab1" data-toggle="tooltip" title="داشبورد">
                <a href="#navigationDashboards" title="داشبوردها">
                    <i class="icon ti-pie-chart"></i>
                </a>
            </li>
            <li id="tab2" data-toggle="tooltip" title="جشنواره های من">
                <a href="#festivals" title="جشنواره های من">
                    <i class="icon ti-package"></i>
                </a>
            </li>
            <li id="tab3" data-toggle="tooltip" title="کدهای جشنواره">
                <a href="#serialNumbers" title="کدهای جشنواره">
                    <i class="icon ti-layers"></i>
                </a>
            </li>
            <li id="tab4" data-toggle="tooltip" title="سوابق خرید">
                <a id="tab4" href="#invoices" title="سوابق خرید">
                    <i class="icon ti-agenda"></i>
                </a>
            </li>
        </ul>

then the js:

function checkUrl() {
if (document.location.href === "https://example.com/url-of-first-tab") {
   document.getElementById("tab1").classList.add("active");
}
if (document.location.href === "https://example.com/url-of-second-tab") {
   document.getElementById("tab2").classList.add("active");
}
if (document.location.href === "https://example.com/url-of-third-tab") {
   document.getElementById("tab3").classList.add("active");
}
if (document.location.href === "https://example.com/url-of-forth-tab") {
   document.getElementById("tab4").classList.add("active");
}
}

Also keep it in mind that none of your a tags shoud have active class in html!