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

在这里，我在Sepatare页面名称中创建了菜单列表，名称是菜单.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>

我在"关于我们"中包括菜单.html页面.html和公司.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。请帮助我。

你的syntax是错误的，试试，

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

并首先将active class设置为元素，该元素将在开始时显示。

可能是将活动类设置为文档就绪上的特定锚标记的一种方法：

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');
    });
 });

相关内容

最新更新

热门标签：