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

时间:2019-04-10 08:00:23

标签: html css html5

我有一个包含以下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>

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

5 个答案:

答案 0 :(得分:2)

请添加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>

答案 1 :(得分:2)

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

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

答案 2 :(得分:1)

使用一些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/

答案 3 :(得分:1)

这是使用纯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>

答案 4 :(得分:-1)

这是我当前的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;
}