更改母版页中菜单项的类

chaning the class of menu item in the master page

本文关键字：菜单项 母版页      更新时间：2023-09-26

我在母版页中有一个菜单项。。我已经使用javascript在单击时更改了类。。它会更改类一秒钟，但当它重定向到其他页面时，它会变为相同的。。知道我该怎么做吗

我现在无法访问完整的代码仪式，但它是这样的（我使用了一些警报框来查看发生了什么。）

<style>
test1{ color: red;
   height:1000px;
      font-size:5px ;
       background-color:Aqua;
      } 
      test2 
      { font-family:Kozuka Mincho Pro M;
          color: red;
      font-size: 5px } 


<script type="text/javascript">
var lastid = "";
function myFunc(id) {
    alert(id);
    if (lastid != "") {
        document.getElementById(lastid).removeAttribute("class", "test2");
        document.getElementById(lastid).setAttribute("class", "test1");
        var a = document.getElementById(lastid);
        alert(a.getAttribute("class"));
    }
    var element = document.getElementById(id);
    document.getElementById(id).setAttribute("class", "test2");
    var cssid = id;
    $("#" + id).addClass('test1');

    alert(document.getElementById(id).getAttribute("class"));
    lastid = id;
}
    </script>

<li  id="firstry" onclick="myFunc(this.id);" ><a href="master-child.aspx"> Click</a> </li>

我已经使用Jquery完成了这项工作。。它让事情变得容易多了。。这将遍历菜单中的每个链接，然后添加与当前页面匹配的类。。以下是脚本：

 <script type="text/javascript">
        $(document).ready(function () {
            $('#subnav a').each(function (index) {
                if (this.href.trim() == window.location)
                    $(this).addClass("selected");
            });
        });
  </script>

实现这一点的一种方法是向与页面名称相对应的body标记添加一个类和一个CSS类。

<body id="home">

然后是活动菜单项的css，假设您的菜单项上有类名：

#home li.firstitem { ... }
#about li.seconditem { ... }
相关文章：