Javascript 如何覆盖子页面母版页（模板）中的html代码

我的母版页带有不可编辑的区域div“菜单栏”，所以当我更改母版页上的条目时，它将在所有子页上更改

问题是，我有一个类“curent”，它改变了框“POLAZNA”的背景，但在子页面上，我需要将其更改为“O NAMA”，但因为它是不可编辑的区域，所以我不能

我如何解决我的问题

<div id="menu-bar">

  <li class="current"><a href="index.html" class="current">POLAZNA</a></li>
  <li><a href="o-nama.html">O NAMA</a>
    <ul>
      <li><a href="o-nama.html">Društvo MS BPŽ</a></li>
      <li><a href="klub-ng.html">Klub Nova Gradiška</a></li>
      <li><a href="dokumenti.html">Dokumenti</a></li>
    </ul>
  </li>
  <li><a href="ms.html">MS</a>
    <ul>
      <li><a href="lijecenje.html">Liječenje</a></li>
      <li><a href="terapija.html">Fizikalna terapija</a></li>
      <li><a href="pomagala.html">Ortopedska pomagala</a></li>
    </ul>
  </li>
  <li><a href="projekti.html">PROJEKTI</a>
    <ul>
      <li><a href="asistenti.html">Osobni asistenti</a></li>
      <li><a href="prevencija.html">Prevencija institucionalizacije</a></li>
      <li><a href="projekt-sb.html">Projekt grada SB</a></li>
      <li><a href="radovi.html">Javni radovi</a></li>
      <li><a href="ostali-projekti.html">Ostali projekti/ programi</a></li>
    </ul>
  </li>
  <li><a href="donatori.html">DONATORI</a>
    <ul>
      <li><a href="mspm.html">MSPM</a></li>
      <li><a href="grad-sb.html">Grad SB</a></li>
      <li><a href="grad-ng.html">Grad NG</a></li>
      <li><a href="bpz.html">BPŽ</a></li>
      <li><a href="hzz.html">HZZ</a></li>
      <li><a href="dm.html">DM</a></li>
    </ul>
  </li>
  <li><a href="forum/index.php">FORUM</a></li>
  <li><a href="kontakt.html">KONTAKT</a></li>
    </div>

这是一种使用jQuery实现的方法： 需要注意的是，我已经为每个LI添加了类，它们是按顺序从

LIU a

开始的，然后

LIU a

的每个子级都将有一个从

a

开始的类，所以

a_1

然后

a_2

。。下一个

li

将有一个

li\u b

类，依此类推

下面是一把小提琴，显示了下面的代码：

HTML:

---

如果您不能编辑菜单中的代码，也许您可以在包含所选菜单ID的页面中设置一个隐藏ID，然后使用jquery将“当前”类添加到具有该ID的LI中？感谢您的回复，但我必须指出，对于jquery，我是一个新手，因此如果您可以举一个代码示例的话。这并不是说我懒惰，但网页设计和编程不是我的主要分支。我假设你的布局中有jquery库，你可以在母版页中编辑LI，而不是在单个页面上编辑，是吗？是的，我的布局中有jquery库，是的，我可以编辑母版页上的所有内容，但不能编辑单个页面，因为我需要它是不可编辑的区域，所以当我在母版页的菜单栏中添加或删除某个内容时，它将更新所有子页面OK，理想情况下这不应该用javascript完成，您应该在服务器上设置所选菜单，然后它才会进入浏览器。我可以为您制作一些东西，但需要您在每个子页面上设置一个值来设置“所选菜单”。。那可以吗？谢谢，它很好用！我只是有一些页面的问题，因为我有一个以上的脚本开始加载，我的事情我知道哪一个。。。form.jotformeu.com/jsform/33351671100340“>我正在尝试实现jQuery.noConflict（）代码，但现在我有问题。我知道对你们中的一些人来说这很容易，但对我们这些不太擅长jQuery的人来说这是一个小问题。这不应该与我上面给你的内容冲突，你只要确保我给你的内容在你的jQuery链接下面，如果你仍然有问题，请告诉我。在索引页上，你的代码wWorks很好。但在其他子页面（如我的文章）上，我还有一些脚本。你有两次jquery库，只需要一个版本。保留/jquery-1.10.2.min.js并删除/jquery-1.9.1.js看看你如何处理。我已经解决了问题……删除了jquery-1.10.2.min.js，留下了jquery-1.9.1.js。然后我添加了jquery-ui-1.10.3.custom.js，现在一切正常。感谢您的努力！如果我有任何问题，我会让您知道。。。

<!--master layout stuff here -->
    <div id="menu-bar">
        <ul>
          <li class="li_a"><a href="#" class="a_1">POLAZNA</a></li>
          <li class="li_b"><a href="o-nama.html" class="b_1">O NAMA</a>
            <ul>
              <li><a href="#" class="b_2">Društvo MS BPŽ</a></li>
              <li><a href="#" class="b_3">Klub Nova Gradiška</a></li>
              <li><a href="#" class="b_4">Dokumenti</a></li>
            </ul>
          </li>
          <li class="li_c"><a href="#" class="c_1">MS</a>
            <ul>
              <li><a href="#" class="c_2">Liječenje</a></li>
              <li><a href="#" class="c_3">Fizikalna terapija</a></li>
              <li><a href="#" class="c_4">Ortopedska pomagala</a></li>
            </ul>
          </li>
            <!-- etc -->
        </ul>
    </div>
    <!-- page here -->

    <!-- this is the hidden to set the menu -->
    <input type="hidden" id="selID" value="c_3" />
    <!-- End of page here -->

    $(document).ready(function () {
        var selID = $('#selID').val(),
            liID = selID.split("_")[0];

        //this first row will select the outer menu when the sub menu it selected
        //comment this out if you don't want it 
        $('#menu-bar .' + liID + '_1').addClass('current');
        //this one selects the actual menu item
        $('#menu-bar .' + selID).addClass('current');

    });