Jquery removing and adding active class to li node

2020-05-05 04:35发布

Jquery Removing & Adding 'Active' Class On LI Navigation Works With preventDefault, But Link No Longer

Jquery removing an adding active class to li nodes not working

I know it should be really basic to remove and add the active class to li's in order to highlight the current page's nav item, but I've been unable to get it to work.

I find that I must use e.preventDefault() to make it work, but when I do the link doesn't work but the highlighted nav item works. If I remove the preventDefault() then it navigates but doesn't highlight. I should say that my nav is sitting in a header.php include file. Here's what I have:

<ul class="myNav">
  <li><a href="index.php">Home</a></li>
  <li><a href="portfolio.php">Portfolio</a></li>
  <li><a href="about.php">About</a></li>
  <li><a href="contact.php">Contact</a></li>
</ul>

$('.myNav li a').click(function (e)
{
  e.preventDefault();
$('.myNav li').siblings().removeClass('active');
$(this).parent().addClass('active');
//var url = $(this).attr("href"); 
//window.location = url;
});

I tried to send the page to the clicked url and this loads the correct page, but it removes the class! I'd like to solve this, but I'd also like to understand why it isn't working correctly.

5条回答
贼婆χ
2楼-- · 2020-05-05 05:09
var link = document.location.href.split('/').slice(-1);   // retrieve page name
$('#menuInner li a.active').removeClass('active');        // remove class 'active'
$('#menuInner li a[href$="'+link+'"]').parent().addClass('active');// and add it to a matching 
查看更多
萌系小妹纸
3楼-- · 2020-05-05 05:15

I ended up doing it in PHP like this:

<?php
//grab the current page name to use in the
$path = $_SERVER['PHP_SELF'];
$page = basename($path);
$page = basename($path, '.php');
?>

        <li<?php if ($page == 'index') echo 'class="active"';?>><a href="index.php">Home</a></li>
    <li <?php if ($page == 'portfolio') echo "class='active'"; ?> ><a href="portfolio.php">Portfolio</a></li>
    <li <?php if ($page == 'about') echo 'class="active"'; ?> ><a href="about.php">About</a></li>
    <li <?php if ($page == 'contact') echo 'class="active"'; ?> ><a href="contact.php">Contact</a></li>
查看更多
祖国的老花朵
4楼-- · 2020-05-05 05:19

when you navigate out of the page, whatever you did in javascript will be lost. Only way would be for your server program to set the 'active' flag, maybe by adding a query parameter to the link, or by checking the program's url

查看更多
Ridiculous、
5楼-- · 2020-05-05 05:21

I am afraid you can't achieve both highlighting and redirecting to the page at the same time using only jQuery. You should better try to add class active to respective li in your pages for example in index.php page add this line

  <li class="active"><a href="index.php">Home</a></li>

Because you cant preserve the state of menus using only jQuery. If this menu section of your page is in a seperate file like header.php then you have to detect which one is the current page. And can easily detect current page in php and add class="active" to corresponding li to highlight that.

查看更多
姐就是有狂的资本
6楼-- · 2020-05-05 05:27

You have to do this in PHP by detecting the current url and comparing that the the url of the nodes in your navigation. Check this out: How can I get the current page's full URL on a Windows/IIS server?

查看更多
登录 后发表回答