Question

我有一个包含以下li

的菜单

<div class="menu">
    <ul>
       <li><a href="index.jsp" class="active">Home</a></li>
       <li><a href="listnews.jsp">News</a></li>
       <li><a href="abc.jsp">ABC</li>
    </ul>
</div>

在此代码中，主页处于活动状态。但是要在我单击“新闻”页面时启用活动状态。我能怎么做？感谢收看。

Answer 1

请添加Js，例如：

jQuery(document).ready(function () {
  jQuery('.menu li a').click(function () {
      //removing the previous selected menu state
      jQuery('.menu li').find('a.active').removeClass('active');
      //adding the state for this parent menu
      jQuery(this).addClass('active');

  });
});

a.active {
 color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
    <ul>
       <li><a href="index.jsp" class="active">Home</a></li>
       <li><a href="listnews.jsp">News</a></li>
       <li><a href="abc.jsp">ABC</li>
    </ul>
</div>

Answer 2

您可以使用jQuery来执行此操作，请使用以下脚本：

p4v -t history -s //path/to/file.txt

Answer 3

使用一些JS或JQuery，在链接上添加click事件并调用方法


<div class="menu">
    <ul>
       <li><a href="index.jsp" click="MyMethod">Home</a></li>
       <li><a href="listnews.jsp" click="MyMethod">News</a></li>
       <li><a href="abc.jsp" click="MyMethod">ABC</li>
    </ul>
</div>

并在Jquery（或JS）中：执行此操作：


YourLinkClicked.removeClass('active');
YourLinkClicked.addClass('active');

或者仅查看以下链接：http://jsfiddle.net/designaroni/E53t9/

Answer 4

这是使用纯javascript

编写的代码

화이팅!!

function change(elem){
  var list = document.querySelectorAll(".menu ul li a");

  for (var i = 0; i < list.length; ++i) {
    list[i].classList.remove('active');
  }
  elem.classList.add('active');
}

.active{
color:red;
}

<div class="menu">
    <ul>
       <li><a href="#" class="active" onclick="change(this)">Home</a></li>
       <li><a href="#" onclick="change(this)">News</a></li>
       <li><a href="#" onclick="change(this)">ABC</a></li>
    </ul>
</div>

Answer 5

这是我当前的def discount(size, count): price_8oz = 1.20 price_12oz = 1.75 price_12oz_discount = 1.35 if size == 8: return price_8oz * count elif size == 12: if count <= 4: return price_12oz * count elif count > 4: # divmod() divides one number by another and returns both the number of times # the second number fits into the first, but also the remainder. # Here we calculate how many times five goes into the customer order # and how many extra cups are left over. fivecount, remainder = divmod(count, 5) return price_12oz_discount * fivecount * 5 + 1.75 * remainder # Here we test the code to make sure that it works across several iterations of five counts # with 12 ounce cups. for count in range(2, 12): print('count:', count, 'cost:', discount(12, count))项目使用的一些基本功能。

将其添加到母版页或共享页中，每次站点重新加载时都需要运行js。

您需要使用jQuery

MVC

$(document).ready(function () {
  // the current page url eg /index.jsp
  var href = window.location.href.toLowerCase();
  
  $(".menu").find("a").each(function () {
    // find the current li that match the current Url
    if (href.indexOf($(this).attr("href").toLowerCase()) != -1)
           $(this).addClass("active"); // set the current li to active
     })
 })

.acive{
color:red;
}

单击导航菜单时如何激活状态？

5 个答案: