javascript - 尝试将事件类添加到菜单项

Question

我花了 2 个小时尝试创建一个事件菜单但没有成功，所以我想我会寻求帮助。我有一个 html 菜单，一些 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>

当用户在特定页面上时，他们点击的“a”链接应该变为粗体。但是，无论出于何种原因，它都不起作用。

如果有任何帮助，我将不胜感激

问候，

jack

Answer 1

我不清楚你的问题，但你想将事件类设置为菜单，所以你试试下面的代码

$('#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>