Javascript实现页面左边的菜单选中项高亮显示

时间：2023-03-09 09:32:05
Javascript实现页面左边的菜单选中项高亮显示

在项目开发过程中，遇到一个问题

在一个模板页面中，Layout.cshtml，页面左边放了一个菜单项menu,每一项都是一个链接到一个新的页面。但所有页面都是用这个模板Layout.cshtml。需要当你点击到menu上某一项时，该项应用css class "selected"高亮显示。

Layout.cshtml代码如下：

<div class="sidebar-wrap">

              <ul class="sidebar-ul" id="ProductNav">

                  <li>

                      <a class="selected" href="/product1">product1</a>

                  </li>

                   <li>

                      <a href="/product2">product2</a>

                  </li>

                  <li>

                      <a href="/product3">product3</a>

                  </li>

                   <li>

                      <a href="/product4">product4</a>

                  </li>

                  <li>

                      <a href="/product5">product5</a>

                  </li>

                   <li>

                      <a href="/product6">product6</a>

                  </li>

              </ul>

          </div>

刚开始，我写了一个JavaScript脚本，如下：

<div class="sidebar-wrap">

              <ul class="sidebar-ul" id="ProductNav">

                  <li>

                      <a class="selected" href="/product1">product1</a>

                  </li>

                   <li>

                      <a href="/product2">product2</a>

                  </li>

                  <li>

                      <a href="/product3">product3</a>

                  </li>

                   <li>

                      <a href="/product4">product4</a>

                  </li>

                  <li>

                      <a href="/product5">product5</a>

                  </li>

                   <li>

                      <a href="/product6">product6</a>

                  </li>

              </ul>

          </div>

<script type="text/javascript" src="/scripts/jquery.min.js"></script>

<script type='text/javascript'>

$(document).ready(function(){

$('#ProductNav li a').click(function(){

$('#ProductNav li a.selected').removeClass('selected');

$(this).addClass('selected');

});

});

</script>

发现并不起作用，点击时，又回到原来的那个product1高亮显示。

原因很简单，因为每一次点击，比如点击product2,它就会进入一个新的页面product2,会重新加载一次Layout.cshtml,而这个javascript是在product1页面执行的，你点击product2,重新加载Layout.cshtml, 还是上面的代码,product1为selected

那么如何实现呢。弄了好久，终于发现一个简便的办法。当从product1页面，点击product2时，用window.location.pathname获取"/product2",从中取出product2. 然后在menu中的每个链接<a>中加上class,class名就是这个名(比如product2).

这样去匹配，匹配上的，就说明是当前页面，就加上css "selected"

具体如下

<div class="sidebar-wrap">

              <ul class="sidebar-ul" id="ProductNav">

                  <li>

                      <a class="product1" href="/product1">product1</a>

                  </li>

                   <li>

                      <a class="product2" href="/product2">product2</a>

                  </li>

                  <li>

                      <a class="product3" href="/product3">product3</a>

                  </li>

                   <li>

                      <a class="product4" href="/product4">product4</a>

                  </li>

                  <li>

                      <a class="product5" href="/product5">product5</a>

                  </li>

                   <li>

                      <a class="product6" href="/product6">product6</a>

                  </li>

              </ul>

          </div>

新的JavaScript如下

<script type="text/javascript" src="/scripts/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        var path = window.location.pathname;

        path = path.replace('/', '');

        $("." + path).addClass('selected');

    });

</script>

如此，就大功告成了.

相关文章