Question

我花了2个小时尝试创建一个没有成功的活动菜单，所以我想我会寻求帮助。我有一个HTML菜单，一些js＆amp;的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”链接应变为粗体。然而，无论出于什么原因，它都无法正常工作。

我非常感谢任何帮助，

此致

杰克

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>

Answer 2

尝试按照并检查它是否有效。

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

此行获取页面名称：

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

您需要对每个链接应用相同的逻辑，以查看它们是否匹配：

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

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

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

下面的片段（调整为匹配，因为location.href赢得了匹配）

＆＃13;

$(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");
  })
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

只需遍历整个链接，当点击任何链接时，将 font-weight：normal 更改为所有链接，然后将 font-weight：bold 应用于当前点击链接。

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

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

4 个答案: