Question

这里我在sepatare页面名称中创建的菜单列表是menu.html

<div id="cssmenu">
    <ul>
    <li><a href="company.html">COMPANY</a>
    </li>
    <li ><a href="services.html">SERVICES</a>

    </li>
    <li ><a href="aboutus.html">ABOUT US</a>

    </li>
    <li ><a href="contact.html">CONTACT US</a>

    </li>
  </ul>
</div>

我在aboutus.html和company.html页面中包含了menu.html页面，如下所示

<html>
<head>
<script src="jquery.js"></script>
 <script>
$(document).("click", "#cssmenu li a", function (e) {
e.preventDefault();

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

});
 </script>
<script>
  $(function(){


$("#menu").load("menu.html");
   });
   </script>
  <style>
   .active {
    color: #D09d23;
    font-weight: bold;
 }
 </style>

  </head>
  <body>
  <div id="menu">
  </div>
  Welcome to About Us
  </body>
    </html>

但所选菜单没有突出显示。这是纯粹的html和jquery。请帮帮我。

Answer 1

您的syntax错误只是尝试，

$(document).on("click", "#cssmenu li a", function (e) {
   e.preventDefault();
   $(this).addClass('active');
});

最初将active class设置为元素，该元素将在开头显示。

Answer 2

可以在文档就绪时将活动类设置为特定锚标记：

var currentPage = window.location.pathname; //depending current page or set title tag for each page and use it
$(function () {
    $("#menu").load("menu.html",function(){
        $(this).find('a[href="'+currentPage+'"]').addClass('active');
    });
 });

如何在另一个html页面中包含html菜单页面以及如何突出显示所选菜单？

2 个答案: