Question

如果首页上的用户添加了课程＆＃34;有效＆＃34;到第一个li，如果在图库页面添加课程＆＃34;活跃＆＃34;到李二等......

<ul>
<li class="home"><a href="/">Home</a></li>
<li class="gallery"><a href="/gallery">Gallery</a></li>
<li class="products"><a href="/products">Products</a></li>
</ul>

Answer 1

您可以执行以下操作来激活菜单。（如果您确定特定页面的URL内容比下面的示例代码可能对您有帮助）

<ul id="ulMenu">
    <li class="home"><a href="/">Home</a></li>
    <li class="gallery"><a href="/gallery">Gallery</a></li>
    <li class="products"><a href="/products">Products</a></li>
</ul>

在母版页中尝试以下功能，并在功能中修改URL包含值。

function MakeActiveMenu()
{
    var currentURL = window.location.pathname;
    var allMenu = $("#ulMenu").find('li');

    if(allMenu != null){
       $.each(allMenu, function(index,value){
          value.classList.remove('active');
       });
    }

    if(currentURL != null){

      if(currentURL.toLowerCase().contains("Home")) {
         $('.home').addClass('active');
      }
      else if (currentURL.toLowerCase().contains("Gallery")){
         $('.gallery').addClass('active');
      }
      else if (currentURL.toLowerCase().toLowerCase().contains("Products")){
         $('.products').addClass('active');
      }
    }
 }

Answer 2

您可以让服务器端检测哪个是“当前”页面，然后将“活动”类呈现到右侧li，或者使用javascript来检测哪个是当前页面，然后添加类

jQuery代码：

$('.gallery').addClass('active'); // for the 'gallery' page

将类添加到活动菜单项

2 个答案: