尝试将活动类添加到菜单项

Question

I've spent 2 hours trying to create an active menu with no success, so I figured I would ask for help. I have an html menu, some js & css...

 $(function() { var pgurl = window.location.href.substr(window.location.href .lastIndexOf("/") + 1); $("#index li a").each(function() { if ($(this).attr("href") == pgurl || $(this).attr("href") == '') $(this).addClass("active"); }) }); 

 .active { font-weight:bold;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='index'> <div class='container'> <div class='top'> <h1><a href='/' title='The Maths Project'>The Maths Project</a></h1> </div> <ul class='section active_section' id='section_2'> <li><span id='section_title_2' class='section_title'><a href='#' id='section_link_2'>Against the odds.</a></span> <ul> <li id='exhibit_106' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a> </li> <li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a> </li> <li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a> </li> </ul> </li> </ul> <ul class='section' id='section_3'> <li><span id='section_title_3' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_3'>Remembering everything.</a></span> <ul> <li id='exhibit_104' class='exhibit_title'><a href='../against-the-odds/black-swans'>black swans</a> </li> <li id='exhibit_72' class='exhibit_title'><a href='../against-the-odds/in-here-it-is-yesterday'>in here it is yesterday </a> </li> </ul> </li> </ul> </div> </div> 

When the user is on a specific page, the "a" link which they have clicked should become bold. However, for whatever reason it's not working.

I would greatly appreciate any help,

Regards,

Jack

Answer 1

I am not clear with your question but do you want set active class to menu, so you try the below code

 $('#navlist a').click(function(e) { e.preventDefault(); //prevent the link from being followed $('#navlist a').removeClass('selected'); $(this).addClass('selected'); }); 

 .nav { color: green; } .selected { color: red; } .san ul li{ float:left; margin-right: 25px; } 

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> <div class="san"> <ul id="navlist"> <li><a class="nav" href="">Home</a></li> <li><a class="nav" href="">About Us</a></li> <li><a class="nav" href="">Services</a></li> <li><a class="nav" href="">Contact</a></li> </ul> </div> 

Answer 2

Try following and check if it works.

$(function() {
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
    $("#index li a").each(function() {
        var href = "";
        if($(this).attr("href") != '')
            href = $(this).attr("href").substr(($(this).attr("href").lastIndexOf("/")+1);
            if (href == pgurl || href  == '')
                  $(this).addClass("active");
      })
  });

Answer 3

This line gets the page name:

var pgurl = window.location.href.substr(window.location.href
                  .lastIndexOf("/") + 1);

you need to apply the same logic to each of your links to see if they match:

$("#index li a").each(function() {

  var aurl = $(this).attr("href").substr($(this).attr("href")
                    .lastIndexOf("/")+1);

  if (aurl == pgurl || aurl == '')
    $(this).addClass("active");
})

---

Snippet below (tweaked to match as location.href won't match)

 $(function() { //var pgurl = window.location.href.substr(window.location.href // .lastIndexOf("/") + 1); var locationhref = "mysite.com/against-the-odds/introduction" var pgurl = locationhref.substr(locationhref.lastIndexOf("/")+1); $("#index li a").each(function() { var aurl = $(this).attr("href").substr($(this).attr("href") .lastIndexOf("/")+1); //console.log(aurl) if (aurl == pgurl || aurl == '') $(this).addClass("active"); }) }); 

 .active { font-weight:bold;color:yellow;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='index'> <div class='container'> <div class='top'> <h1><a href='/' title='The Maths Project'>The Maths Project</a></h1> </div> <ul class='section active_section' id='section_2'> <li><span id='section_title_2' class='section_title'><a href='#' id='section_link_2'>Against the odds.</a></span> <ul> <li id='exhibit_106' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a> </li> <li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a> </li> <li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a> </li> </ul> </li> </ul> <ul class='section' id='section_3'> <li><span id='section_title_3' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_3'>Remembering everything.</a></span> <ul> <li id='exhibit_104' class='exhibit_title'><a href='../against-the-odds/black-swans'>black swans</a> </li> <li id='exhibit_72' class='exhibit_title'><a href='../against-the-odds/in-here-it-is-yesterday'>in here it is yesterday </a> </li> </ul> </li> </ul> </div> </div> 

Answer 4

Just traverse the whole links and when any link will clicked then change the font-weight:normal to all links and then apply the font-weight:bold to currently clicked link.

$().ready(function () {
        $("ul>li").click(function () {
            $("ul>li").css("font-weight", "normal");
            $(this).css("font-weight", "bold");
        });
    });